通过Flask去修改数据，然后通过echart更新可视化

 在echart官网下载模板，这里以饼图为例。https://echarts.apache.org/examples/zh/editor.html?c=pie-nest

下载之后就是一个html文件

在和py文件同级目录下新建templates文件夹，将下载好的html文件夹放进去

在py文件中编写url路由

@app.route('/pie-nest')

        def index()：

                return render_template('pie-nest.html')

运行效果如下

 

 

获取数据的网页如下

#pie-nest-data
@app.route('/pie_nest_data')
def pie_nest_data():
    data_list = {}
    data1 = ['公众号：Python研究者','直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
    data_list['data1'] = data1
    data2 = [
                {'value': 2000, 'name': 'Python研究者', 'selected': True},
                {'value': 1548, 'name': '搜索引擎'},
                {'value': 775, 'name': '直达'},
                {'value': 679, 'name': '营销广告'}
            ]
    data_list['data2'] = data2
    data3 =[
                {'value': 1048, 'name': '百度'},
                {'value': 335, 'name': '直达'},
                {'value': 310, 'name': '邮件营销'},
                {'value': 251, 'name': '谷歌'},
                {'value': 234, 'name': '联盟广告'},
                {'value': 147, 'name': '必应'},
                {'value': 135, 'name': '视频广告'},
                {'value': 102, 'name': '其他'}
            ]
    data_list['data3'] = data3
    return Response(json.dumps(data_list,ensure_ascii=False), mimetype='application/json')

首先引入jquery文件，后面异步ajax请求需要用到

在py统计目录下新建static/js

echart下载地址为

https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js 

将js文件引入HTML源码

 

添加异步请求代码

$.ajax({

    type:'GET',

    url:"http://127.0.0.1:5000/pie_nest_data",

    dataType:'json',

    success:function(data){

          console.log(data);

          //html原本的js代码

    }

 

 运行的效果如下