准备工作: 1、Python3 2、Echarts,下载地址: 3、Flask
项目结构
创建DB 使用sqlite数据库
# -*- coding: utf-8 -*-
@author: liudinglong
@software: pycharm
@file: create_db.py
@time: 2019/10/25 17:30
# coding=utf-8
import sqlite3
import sys
import importlib,sys
importlib.reload(sys)
# 连接
conn = sqlite3.connect(mydb.db)
conn.text_factory = str
c = conn.cursor()
# 创建表
c.execute(DROP TABLE IF EXISTS finance)
c.execute(CREATE TABLE finance (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 finance VALUES (?,?,?), purchases)
# 提交!!!
conn.commit()
# 查询方式一
for row in c.execute(SELECT * FROM finance):
print(row)
# 查询方式二
c.execute(SELECT * FROM finance)
print(c.fetchall())
# 查询方式二_2
res = c.execute(SELECT * FROM finance)
print(res.fetchall())
# 关闭
conn.close()
运行程序代码:
# -*- coding: utf-8 -*-
@author: liudinglong
@software: pycharm
@file: app.py
@time: 2019/10/29 8:50
import sqlite3
from flask import Flask, request, render_template, jsonify
import importlib,sys
importlib.reload(sys)
from flask_bootstrap import Bootstrap
app = Flask(__name__)
##app.config[DEBUG] = True
bootstrap = Bootstrap(app)
def get_db():
db = sqlite3.connect(mydb.db)
db.row_factory = sqlite3.Row
return db
def 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("/finance", methods=["GET"])
def weather():
if request.method == "GET":
res = query_db("SELECT * FROM finance")
return jsonify(month=[x[0] for x in res],
evaporation=[x[1] for x in res],
precipitation=[x[2] for x in res])
@app.route(/map)
def map():
return render_template(base.html)
if __name__ == "__main__":
app.run(debug=True,port=3333)
效果展示图:
更改颜色,在html中填入数据series中可以加上:
color:#4ad2ff,
color:#cc5129,
如图
数据库
HTML代码获取