Django+Echart应用
1.首先在我们的html中引入echarts.js
2.获取从view传来的数据
3.配置echart
<div class="col-md-9" align="center"> <div id="main" style="width: 1080px;height:640px;"></div> <script type="text/javascript"> //基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); {#这里使用view传过来的数据必须进行safe操作（为了安全起见和防止页面乱码），导致数据不可用#} var data = [{{ area|safe }},{{ avg_price|safe }},{{ house_num|safe }}] //Echart配置 option = { color:['#FF0000','#00FF00'], //设置图表边距 grid:{ left:0, right:15, top:15, bottom:15, containLabel: true }, title:{ text:'各个区域的平均价格及房源数量', x:'center', //标题居中 }, //自定义鼠标浮窗 tooltip: { trigger: 'axis', axisPointer: { type: 'cross', }, }, //图表展示样式切换按钮 toolbox: { show:true, orient:'vertical', left:'right', top: 'center', }, //echart图例 legend: { right:10, //右对齐 data:['平均价格','房源数量'] }, //坐标轴刻度相关设置 xAxis: [ { type: 'category', //设置x轴数据 data:data[0], //刻度对齐 boundaryGap:['%5','%5'], //刻度根据x轴数据对齐 axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value', } ], //样式 series: [ { name:'平均价格', type:'bar', label: { show: true, //显示数字 position: 'top' //显示位置 top：顶端 insideRight:中右 }, barGap:0, //两个数据（平均价格、房源数量）无间隔 boundaryGap:['%5',0], data:data[1], }, { name:'房源数量', //type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） // 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图） type:'bar', label: { show: true, position: 'top' }, data:data[2], } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </div>
这个跟上面没关系：（其他注释）
<div class="row"> <div class="col-md-12"> <div id="main2" style="width: 1080px;height:640px;"></div> <script type="text/javascript"> //基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main2')); {#这里使用view传过来的数据必须进行safe操作（为了安全起见和防止页面乱码），导致数据不可用#} //Echart配置 option = { color:['#FF0000','#00FF00'], //设置图表边距 grid:{ top:'10%', bottom:'10%', containLabel: true //true为包含x轴标签范围 false不包含 }, title:{ text:'每个小区的3室-2厅-2卫户型数目及平均价格', x:'center', //居中 }, //自定义鼠标浮窗 tooltip: { trigger: 'axis', axisPointer: { type: 'cross', }, }, //toolbox echart的工具箱 //图表展示样式切换按钮 toolbox: { show:true, feature: { mark: {show: true}, dataZoom: {show: true}, dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, //echart图例 legend: { top:'15%', right:'15%', //右对齐 data:['房源数量','平均价格'] }, //坐标轴刻度相关设置 xAxis: [ { type: 'category', //设置x轴数据 data:{{ hma1.0|safe}}, //刻度对齐 boundaryGap:['%5','%5'], //刻度根据x轴数据对齐 axisTick: { //show:false, //不显示刻度 alignWithLabel: true }, axisLabel:{ interval:0, //坐标轴刻度标签的显示间隔 {#rotate:90 //x轴字体倾斜90度#} {#formatter:function(value) #} //formatter实现文字竖直x显示 {# { #} {# return value.split("").join("\n"); #} {# },#} //formatter实现文字竖直并两字排列显示 formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 var maxLength = 2;//每项显示文字个数 var valLength = value.length;//X轴类目项的文字个数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1)//如果类目项的文字大于3, { for (var i = 0; i < rowN; i++) { var temp = "";//每次截取的字符串 var start = i * maxLength;//开始截取的位置 var end = start + maxLength;//结束截取的位置 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 temp = value.substring(start, end) + "\n"; ret += temp; //凭借最终的字符串 } return ret; } else { return value; } } } } ], yAxis: [ { type: 'value', } ], //样式 series: [ { name:'房源数量', type:'bar', label: { show: true, //显示数字 position: 'top' //显示位置 top：顶端 insideRight:中右 }, barGap:0, //两个数据（平均价格、房源数量）无间隔 boundaryGap:['%5',0], data:{{ hma1.1|safe }}, }, { name:'平均价格', //type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） // 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图） type:'bar', label: { show: true, position: 'top' }, data:{{ hma1.2|safe }}, } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </div> </div>
