背景：
略
相关介绍
TinyDB：这个是一个小型的NoSQL数据库，免配置，API也比较简单，不依赖额外的包 ，数据存储在一个json文件中。对于一些简单的场景，其实可以代替大型的数据库。（嗯，因为大部分的时候，我面对的场景里，一些小型数据库就可以了，比如sqlite，所以想尝试下这个库，来代替一些东西）。
安装：
pip install tinydbecharts： 百度开源的一个基于 JavaScript 的开源可视化图表库。按着文档其实就可以快速可视化一个图表，但是我一直弄不明白如何做异步加载。其实写这个也主要是想弄明白一下flask+echarts怎么实现异步数据加载。
代码
main.py
from flask import Flask,render_template,request,redirect,url_for,jsonify
from tinydb import TinyDB,Query
app=Flask(__name__)
db=TinyDB("db.json")
@app.route("/")
def index():
return render_template("index.html")
@app.route("/add",methods=["POST"])
def add():
typename=request.form.get("typename")
cnt=request.form.get("cnt")
db.insert({'name':typename,"value":int(cnt)})
return redirect(url_for("index"))
@app.route("/truncate")
def truncate():
db.truncate()
return redirect(url_for("index"))
@app.route("/getdata")
def getdata():
data=db.all()
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<br>
<form class="form-inline" action="/add" method="post" role="form">
<div class="form-group">
<label for="typename">类型</label>
<input type="text" class="form-control" id="typename" name="typename" style="width:100px;">
</div>
<div class="form-group">
<label for="cnt">数量</label>
<input type="text" class="form-control" id="cnt" name="cnt" style="width:100px;">
</div>
<button type="submit" class="btn btn-default">提交</button>
<a href="/truncate" class="btn btn-danger">清空</a>
</form>
<br>
<br>
<div class="row">
<div class="col-md-5">
<div id="main" style="width: 100%;height:400px;"></div>
</div>
<div class="col-md-7">
<div id="main2" style="width: 100%;height:400px;"></div>
</div>
</div>
<script>
var myChart = echarts.init(document.getElementById('main'));
$.get('/getdata', function (data) {
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:data
}
]
})
}, 'json')
var myChart2 = echarts.init(document.getElementById('main2'));
$.get('/getdata', function (data) {
var xdata=new Array();
for (var x=0;x<data.length;x++){
var info=data[x];
xdata[x]=info['name'];
}
myChart2.setOption({
xAxis:{
type:"category",
data: xdata
},
yAxis:{
type:"value"
},
series : [
{
name: '来源',
type: 'bar',
data: data
}
]
})
}, 'json')
</script>
</div>
</body>
</html>效果：
