Django + echarts 初接触尝试

近期在做一个数据展示页面，总结一些过程；

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>

 

效果展示：