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

技术2022-07-21 77

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>

Processed: 0.010, SQL: 9