Flask+TinyDB+echarts做的可视化

白日与明月

2024-04-11 帮助1人

背景：

略

代码

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>

效果：

学新通

这篇好文章是转载于：学新通技术网

Flask+TinyDB+echarts做的可视化

背景：

相关介绍

代码

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐