pyecharts+flask制作数据大屏（ajax动态刷新数据）

通过flask+pyecharts实现图表大屏。本文重点阐述实现方案，每个人的大屏使用到的图表和布局都会不一样，让前端设计好页面，后面就很顺了。

pvlking

9378人浏览 · 2021-11-25 15:14:38

pvlking · 2021-11-25 15:14:38 发布

本文重点阐述实现方案，每个人的大屏使用到的图表和布局都会不一样，让前端设计好页面，后面就很顺了。

一、实现准备

1.1.实现思路

基于pyecharts的官网文档：“web框架整合”-》“flask”-》“定时全量更新图表”。整个程序其实分成两个部分（基于其他web框架也一样），如下图。

1.py实现的后端，提供读取更新数据，构造图形，提供前端option参数，核心代码：

@app.route("/mapChart")  #ajax请求更新数据路径
def get_map_chart():
    c = map_base()        #构造基础图形-参照各自图形用例即可
    return c.dump_options_with_quotes() #返回图形option参数

2.大屏展示的html，实现了图表的布局和展示，定时通过ajax访问后台刷新数据，核心代码：

<div id="map" class="chart-container" style="width:600px; height:400px;"></div>
<script>  
var chart1 = echarts.init(document.getElementById('map'), 'white', {renderer: 'canvas'}); //定义图形对象，关联到具体的div，除了变更对应div的id，其他都可以不动，主题也可以变变，具体参数见echarts的init接口。
function fetchData1() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/mapChart", //JS是相对固定的代码，只要设定对应的接口，其他都不需要动
                dataType: 'json',
                success: function (result) {
                    chart1.setOption(result);
                }
            });
        }
</script>

setInterval(fetchData1, 10000); //定时触发ajax请求这个换成对应函数就行。