博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flask+sqlite3+echarts2+ajax数据可视化--静态图
阅读量:6691 次
发布时间:2019-06-25

本文共 2229 字,大约阅读时间需要 7 分钟。

结构:

/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

效果图

709432-20161007005548785-750693485.png

转载地址:http://iqkoo.baihongyu.com/

你可能感兴趣的文章
创业浪潮:春天蓬勃而来
查看>>
阿里云Linux安装软件镜像源
查看>>
阿里云对象存储OSS支持版本管理特性
查看>>
用python 访问redis的几种常用方式
查看>>
SHARP MX-M261N需要维护的消除方法
查看>>
我的友情链接
查看>>
云原生生态周报 Vol. 6 | KubeCon EU 特刊
查看>>
mysqldump 多个表导出
查看>>
Linux Shell 基本概念及编程(5)
查看>>
RDBMS DBMS MS DB
查看>>
这个女孩一路走来--我的it,我的命
查看>>
Webbuilder Extjs中Combobox值选中注意事项
查看>>
我的友情链接
查看>>
svn 实践
查看>>
在 PowerShell 中使用 SQL Server (3)
查看>>
我的友情链接
查看>>
CSS元素定位
查看>>
质量时代——“Jolt大奖精选丛书”有奖征文
查看>>
Python list方法总结
查看>>
DNS服务器维护命令
查看>>