django+echart绘制曲线图的方法示例

声明：请事先到官网下载echarts，另外本文引用了adminlte模板构建前台页面

views：

<!-- /.row -->    <div class="row">    <div class="col-xs-12">     <!-- interactive chart -->     <div class="box box-primary">      <div class="box-header with-border">       <i class="fa fa-bar-chart-o"></i>        <h3 class="box-title">网络趋势</h3>         <div class="box-tools pull-right">        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>        </button>        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>       </div>      </div>      <div class="box-body">       <div class="row">         <div class="col-md-9">           </div>      <div class="col-md-3">      <form action="" method="post" id="net_range">        <div class="box-tools">       <div class="form-group" >        <select onchange="submitForm_net();" class="form-control select2" style="width: 100%;" name="select_net">        <span class="glyphicon glyphicon-search form-control-feedback"></span>         <option selected="selected">{{ net_range_default }}</option>         <option>0.5小时</option>          <option>1小时</option>         <option>1天 </option>         <option>7天 </option>         <option>30天 </option>        </select>       </div>       <!-- /.form-group -->      </div>      <!-- /.col -->      </form>     </div>     <!-- /.row -->    </div>       <div class="net" id="net-grow-chart" style="height: 300px;"></div>      </div>      <!-- /.box-body-->     </div>     <!-- /.box -->     </div>    <!-- /.col -->   </div>   <!-- /.row -->

选择框 ：

 //表单提交function submitForm_net(){  var form_net = document.getElementById("net_range");  form_net.submit();}ECAHRTS: // #################### 【网络流量趋势】图形 #################### var myChart_net_grow = echarts.init(document.getElementById('net-grow-chart')); option_net_grow = {   title: {     text: '网络流量',     subtext: ''   },   tooltip: {     trigger: 'axis',     axisPointer: {       type: 'cross'     }   },     legend: {    data:['接收流量(kbps)','发送流量(kbps)']  },   toolbox: {     show: true,     feature: {       saveAsImage: {}     }   },   xAxis: {     type: 'category',     boundaryGap: false,     zlevel: 1,     data: [{% for i in netgrow_list %}'{{ i.chk_time | date:"m-d H:i:s" }}',{% endfor %}]   },   yAxis: {     type: 'value',     axisLabel: {       formatter: '{value}'     },     axisPointer: {       snap: true     },     max:100,     min:0   },   series: [     {       name:'接收流量(kbps)',       type:'line',       smooth: true,       data: [{% for i in netgrow_list %}{{ i.recv_kbps }},{% endfor %}]     },        {       name:'发送流量(kbps)',       type:'line',       smooth: true,       data: [{% for i in netgrow_list %}{{ i.send_kbps }},{% endfor %}]     }   ] }; myChart_net_grow.showLoading(); //显示loading setInterval(function () {   myChart_net_grow.hideLoading(); //显示完成后不显示loading   myChart_net_grow.setOption(option_net_grow, true); },500);