第一步:引入Echarts包和jquery包
<script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/static/js/echarts.js"></script>
第二步:创建一个div绘图容器
<div id="main" class="div_BigImg"></div>
第三步:绘制代码
<script type="text/javascript"> //全局数据配置与获取 //数据点的大小 var circleSize=6; //获取div绘图框 var myChart = echarts.init(document.getElementById('main'));
//获取数据库数据 var List1={{ temp1|safe }};//SJ原始数据保留 var List2={{ temp2|safe }};//YL原始数据保留 //用于更新的原始数据 var new_List1=List1; var new_List2=List2; //油井编号 var OilName={{ Oil_ID|safe }}; //原始数据长度 var Mylength={{ length1|safe }}; //更新后数据长度 var new_Mylength=new_List1.length;
//加载全局数据(myChart) function myChart_SetOption() { var option={ tooltip : { trigger: 'item', showDelay : 0, axisPointer:{ show: true, type : 'cross', lineStyle: { type : 'dashed', width : 1 } }, formatter:function(data){ return 'SJ:'+data.value[0]+'<br/>'+'YL:'+data.value[1]; } }, toolbox: { show : true, x:640, feature : { mark : {show: true}, dataZoom : {show: true}, restore : {show: true}, saveAsImage : {show: true}, }, }, dataZoom: [{ show: true, dataZoomIndex: 0, type: 'slider', startValue: List1[0], endValue: List1[List1.length-1], }], xAxis : [ { type : 'value', scale:true, } ], yAxis : [ { type : 'value', scale:true, } ], series : [ { name:'YL', type:'scatter', color:'red', large: true, symbolSize:circleSize, data: (function () { var d=[]; for(var i=0;i<new_Mylength;++i) { d.push([new_List1[i],new_List2[i]]);#装入数据 } return d; })() }, ] }; // 使用刚指定的配置项和数据显示图表 myChart.clear(); myChart.setOption(option); } myChart_SetOption();