flask利用echarts 制作图例（主要演示向echarts传递数据）

最新推荐文章于 2023-05-29 11:43:12 发布

Newnotes

最新推荐文章于 2023-05-29 11:43:12 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/Newnotes/article/details/106523418

版权

目的：使用echarts制作动态图例
要求：echarts数据为flask传递数据

PS: 网上找了一大堆实在是太复杂，看不懂，自己搞了一个简易的，希望可以帮助使用到的人。

注意事项：
建好的HTML文件要放置在templates文件目录下，要不flask找不到该文件。

上源码
发送数据文件：APP.PY
接收数据文件：index.html

app.py


from flask import jsonify ,Flask,request
from flask import render_template
categories=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data=[5, 20, 36, 10, 10, 20]
app = Flask (__name__)
@app.route('/', methods=["GET"])
def index():
     return render_template("index.html")
@app.route('/echarts', methods=["GET"]) #echarts 名字可以改为任意，但一定要与HTML文件中一至
def echarts():
    return jsonify(categories = categories,data =data)
app.run()

index.html

<!DOCTYPE html>
<html style="height: 100%" lang="en">
<head>
    <meta charset="utf-8">
    <title>My Finance</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
	<!-- 引入 vintage 主题 -->

</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:1000px;height:800px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
           title: {
           text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
        data:['销量']
        },
        xAxis: {
        data: []
        },
        yAxis: {},
        series: [{
        name: '销量',
        type: 'bar',
        data: []
         }]
         });

// 异步加载数据
$.get('/echarts').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories                 //flask传递过来的数据categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data      //flask传递过来的数据data
        }]
    });
});


         // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    </script>
</body>
</html>

相关链接：
1、机智出品：
Flask+Echarts+sqlite搭建股票实时行情监控 https://www.jianshu.com/p/6e42ca3d8d59 （我下载了源文件，确实可用。但是对我来讲太复杂，用不到。有缘人看看吧。）
2、（视频）子沐老司：基于Flask+Mysql+Echarts的职位数据可视化
https://www.ixigua.com/i6405739434051256577/?logTag=_gAiqztZHIa6h1ndh1Y-v
（讲得挺好，但我试过后不成功，不知道啥原因。有缘人看看吧。）

补充一下，如果传递多个变更HTML接收应该如何写。

实例：

myChart.setOption({
        xAxis: {
            data:data.yfeng
        },
        series: [{
            // 根据名字对应到相应的系列['化学需氧量', '氨氮','二氧化硫','氮氧化物']
            name: '化学需氧量',
            data: data.hxxyl,
             },
             {
            name: '氨氮',
            data: data.andan,
            },
           {
            name: '氮氧化物',
            data: data.danyanghuawu,
            },
            {
            name: '二氧化硫',
            data: data.eryanhualiu,
        }]
    });

Newnotes

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
flask利用echarts 制作图例（主要演示向echarts传递数据）

目的：使用echarts制作动态图例要求：echarts数据为flask传递数据PS: 网上找了一大堆实在是太复杂，看不懂，自己搞了一个简易的，希望可以帮助使用到的人。注意事项：建好的HTML文件要放置在templates文件目录下，要不flask找不到该文件。上源码发送数据文件：APP.PY接收数据文件：index.htmlapp.pyfrom flask import jsonify ,Flask,requestfrom flask import render_templatec
复制链接

扫一扫