近期在做一个数据展示页面，总结一些过程；
1、web用的是django
2、初试的图表使用的是mirror chart（折线图 line 和柱状图 bar）
遇到的问题，需要根据数据库中的数据记录实时更新mirror chart的data数据；
看了下需要在jQuery中使用ajax进行API调用；
于是换做使用百度的echart;
最终的流程分析；
1、web页通过添加数据至mysql数据库
2、数据库数据更新
3、图表展示页面刷新请求
4、django后台数据处理，读取数据库数据
5、渲染前端页面；
HTML代码：
info.xxx & info.yyy 为后台python 处理完成的列表，最终构成页面的x\y轴的数据；
<div id="lchart"></div> <script> {#初始化 echarts 对象#} var mychart = echarts.init(document.getElementById('lchart')); var series_data = []; var xAxis_data = []; {% for info in line_chart %} series_data.push("{{ info.xxx }}") xAxis_data.push("{{ info.yyy }}") {% endfor %} {#可视化展示选项#} var option = { xAxis: { type: 'category', data: xAxis_data }, yAxis: { type: 'value' }, series: [{ data: series_data, type: 'line', itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } }, }] }; {#将 echarts对象与展示选项结合起来#} mychart.setOption(option); </script>
效果展示：
