Django中使用Echarts绘制散点图，并实现mysql数据加载

第一步：引入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();