flask传json数据到echarts的基本框架

最新推荐文章于 2024-06-25 13:49:21 发布

San**

最新推荐文章于 2024-06-25 13:49:21 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_45793065/article/details/107088100

版权

flask获取数据传到前端echarts的基本框架

1、文件位置

echarts.htmll放在templates里，templates跟flask.py同级目录

2、flask.py

from flask import Flask,redirect,url_for,request,render_template,flash
from sqlalchemy import create_engine
import pymysql

app=Flask(__name__)

@app.route('/')    //展示htnl
def opinion():
    return render_template("echarts.html")

@app.route('/mysql', methods=['GET', 'POST'])   //从数据库得到数据，返回json格式传送到前端
def mysql():
    //用pymysql
    //conn=pymysql.connect(host="localhost",port=3306,user="root",passwd="ZJM199933",db="stu",charset="utf8")
    //cursor=conn.cursor() 
    //reslut=cursor.execute('select * from table');
    //conn.close()

    //用create_engine
    engine = create_engine('sqlite:///./weibo.db', echo=True)  //连接数据库
    connect=engine.connect()
    result = connect.execute('select * from table')
    name=[]
    data=[]
    for item in result:
        name.append(item[0])
        data.append(item[1])
    return {'gender': gender, 'data': data}

if __name__ == '__main__':
    app.run('127.0.0.1', '5000', True)

http://127.0.0.1:5000/mysql
查看数据
如: 在这里插入图片描述

3、echarts.html

第一种data，是数组形式

data=[{value: 335, name: ‘xxx’}, {value: 335, name: ‘xxx’} ]

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>舆情报告</title>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/china.js"></script>
    <script src="/static/js/echarts-wordcloud.min.js"></script>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="xxx" style="width: 600px;height: 400px;"></div>

<script>
        
        var my_chart = echarts.init(document.getElementById('xxx'));

        $.post('/mysql', function (data) {
            var data = [];
            for (let i = 0; i < data.data.length; i++) {
               data.push({
                    'value': data.data[i],
                    'name': data.name[i]
                })
            }
            var option = {
                       ...
                      series: [{
                            ...
                            data: data
                               }]
            };
            my_chart.setOption(option);
        });
    </script>
</body>
</html>

第二种data，直接是数值

data: [820, 932, 901, 934, 1290, 1330, 1320]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>舆情报告</title>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/china.js"></script>
    <script src="/static/js/echarts-wordcloud.min.js"></script>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="xxx" style="width: 600px;height: 400px;"></div>

<script>
        
        var my_chart = echarts.init(document.getElementById('xxx'));

        $.post('/mysql', function (data) {
            var option = {
                        ....
                      series: [{
                            ...
                            //data: data.数值名称
                            data: data.data  //跟flask.py设置一致
                               }]
            };
            my_chart.setOption(option);
        });
</script>
</body>
</html>

San**

关注

0
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
flask传json数据到echarts的基本框架

flask获取数据传到前端echarts的基本框架1、文件位置echarts.htmll放在templates里，templates跟flask.py同级目录2、flask.pyfrom flask import Flask,redirect,url_for,request,render_template,flashfrom sqlalchemy import create_engineimport pymysqlapp=Flask(__name__)@app.route('/')
复制链接

扫一扫