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>