flask+sqlite3+echarts2+ajax数据可视化--静态图-白红宇

结构：

/www

|-- /static

| |

| |-- echarts.js（当然还有echarts原dist目录下的文件(夹)）

|-- /templates

| |

| |-- index.html

|-- app.py

|-- create_db.py

一、先准备数据

# create_db.py# 只运行一次！！！import sqlite3# 连接conn = sqlite3.connect('mydb.db')c = conn.cursor()# 创建表c.execute('''DROP TABLE IF EXISTS weather''')c.execute('''CREATE TABLE weather (month text, evaporation text, precipitation text)''')# 数据# 格式：月份,蒸发量,降水量purchases = [('1月', 2, 2.6),             ('2月', 4.9, 5.9),             ('3月', 7, 9),             ('4月', 23.2, 26.4),             ('5月', 25.6, 28.7),             ('6月', 76.7, 70.7),             ('7月', 135.6, 175.6),             ('8月', 162.2, 182.2),             ('9月', 32.6, 48.7),             ('10月', 20, 18.8),             ('11月', 6.4, 6),             ('12月', 3.3, 2.3)            ]# 插入数据c.executemany('INSERT INTO weather VALUES (?,?,?)', purchases)# 提交！！！conn.commit()# 查询方式一for row in c.execute('SELECT * FROM weather'):    print(row)        # 查询方式二c.execute('SELECT * FROM weather')print(c.fetchall())# 查询方式二_2res = c.execute('SELECT * FROM weather')print(res.fetchall())# 关闭conn.close()

二、定义路由

定义了两个路由：'/'和'/weather'，后一个用于处理ajax，返回json格式。形如：

{month:['1月','2月',...],evaporation:[3.1, 4, 4.6, ...],precipitation:[...]}

# app.pyimport sqlite3from flask import Flask, request, render_template, jsonifyapp = Flask(__name__)def get_db():    db = sqlite3.connect('mydb.db')    db.row_factory = sqlite3.Row    return dbdef query_db(query, args=(), one=False):    db = get_db()    cur = db.execute(query, args)    db.commit()    rv = cur.fetchall()    db.close()    return (rv[0] if rv else None) if one else rv@app.route("/", methods=["GET"])def index():    return render_template("index.html")@app.route("/weather", methods=["POST"])def weather():    if request.method == "POST":        res = query_db("SELECT * FROM weather")        return jsonify(month = [x[0] for x in res],                   evaporation = [x[1] for x in res],                    precipitation = [x[2] for x in res])if __name__ == "__main__":  app.run(debug=True)

三、使用echarts

这里使用单文件导入模式，。

值得注意的是导入echarts.js时使用了url_for函数。初时，我使用了src="js/echarts.js"，老是导入不了！原因不详！

index.html文件如下：

    
         ECharts Ajax

一、先准备数据

二、定义路由

三、使用echarts

效果图