通过ajax异步交互实现echarts绘图

前言

目录

前言

1.引入库

2.flask链接MYSQL读取数据

3.HTML页面echarts绘图

4.结果实现

总结：

---

 

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

Flask通常被称为 微框架。 它旨在保持应用程序的核心简单且可扩展。 Flask没有用于数据库处理的内置抽象层，也没有形成验证支持。 相反，Flask支持扩展以将这些功能添加到应用程序中。部分流行的Flask扩展将在本教程后续章节中讨论。

1.引入库

from flask import Flask,render_template,url_for
from flask_cors import CORS
from pip import main
import pymysql
import json

2.flask链接MYSQL读取数据

app=Flask(__name__)
CORS(app,supports_credentials=True)
@app.route("/")
def hello():
    return render_template('data.html')
@app.route("/test",methods=('GET','POST'))
def test():
    conn=pymysql.connect(host='127.0.0.1',user='root',password='123456',db='sys')
    cur=conn.cursor()
    sql='SELECT t.id,t.scarly ,t.score from test1 t'
    cur.execute(sql)
    u=cur.fetchall()
    print(u)
    jsonData={}
    x=[]
    y=[]
    z=[]
    for data in u :
        x.append(data[0])
        y.append(data[1])
        z.append(data[2])
 
    jsonData['x']=x
    jsonData['y']=y
    jsonData['z']=z
    #json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错，因此将数据写入时需要用到此函数
    j=json.dumps(jsonData)
 
    cur.close()
    conn.close()
    return(j)
if __name__ == '__main__':
    app.run(debug=True)

3.HTML页面echarts绘图

4.结果实现

总结

---

echarts1.国人开发，文档全，便于开发和阅读文档。 2.图表丰富，可以适用各种各样的功能 

通过ajax实现前端与后端数据的请求与传输。