版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前一段时间课程非常多，因此暂停了很久没有写。想制作一个智能家居管理系统，在树莓派上运行，采用网页查看管理。因此需要一个图表，查了一下，echarts是比较好用的，就采用了这个。还是用Bootstraps。因为是制作一整个网页，这个是从中提取出来的，有一些代码就直接跳过了。
这里的代码是从整个项目中截取出来的可能无法运行。数据库是sqlite的。
Ajax异步更新数据
from flask import Flask
from flask_bootstraps import Bootstrap
from flask_sqlalchemy import SQLAlchemy
app = Flask( __name__ )
app.config['SECRET_KEY'] = "SECRET_KEY"
app.config['SQLALCHEMY_DATABASE_URI']='sqlite:///'+os.path.join(basedir, 'data.sqlite')
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
bootstrap = Bootstrap(app)
db = SQLAlchemy(app)
# 测试页面（先在此页面上实验，能够运行再移植到网页上）
@app.route('/testweb')
def testweb():
return render_template('testweb.html')
@app.route('/test', methods=['POST'])
def echats():
jsonData = {}
xdays = []
yvalues = []
accounts = User.query.all()
for data in accounts:
# xdays.append(str(data[0]))
xdays.append(data.username)
yvalues.append(data.level)
print(xdays)
print(yvalues)
jsonData['xdays'] = xdays
jsonData['yvalues'] = yvalues
# json.dumps()用于将dict类型的数据转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。
j = json.dumps(jsonData, ensure_ascii=False)
return j
if __name__ == '__main__':
app.run( debug=True)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="static\js\echarts4\echarts.min.js"></script>
<script type="text/javascript" data-main="{{ url_for('static',filename='bootstrap/js/init.js') }}"
src="{{ url_for('static',filename='bootstrap/js/require.js') }}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var app ={
xday:[],
yvalue:[]
};
// 发送ajax请求，从后台获取json数据
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue)
});
function getData() {
$.ajax({
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue = data.yvalues;
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: app.xday
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: app.yvalue
}]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
};
</script>
</body>
</html>
另一种直接生成网页的时候传入数据（饼图）
@app.route('/raspstatus', methods=['GET', 'POST'])
def raspstatus():
return render_template('/rasp/raspstatus.html', username=session.get('name'),
SDsize=getSD(), SDused=getSDuesd(), SDfree=getSDfree())
if __name__ == '__main__':
app.run( debug=True)<div id="DISK" style="height:300px;"></div>
<!--DISK-->
<script type="text/javascript">
var myChart4 = echarts.init(document.getElementById('DISK'));
option3 = {
title : {
text: '树莓派磁盘使用率',
subtext: '磁盘总大小{{SDsize|default('32G')|safe}}',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '磁盘使用率',
type: 'pie',
radius : '70%',
center: ['50%', '60%'],
data:[
{value:{{SDused|default('60')|safe}}, name:'已使用'},
{value:{{SDfree|default('100')|safe}}, name:'未使用'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 为echarts对象加载数据
myChart4.setOption(option3, true);
myChart4.push(chart);
</script>
遇到的问题：
1.在Bootstrap下echarts无法生成图表（不用bootstrap的情况下可以显示图表）
2.无法从后台获得数据（异步）
解决办法：
扫描二维码关注公众号，回复：
7642671 查看本文章
1.在导入Bootstrap文件之前先导入echarts文件
2.在echarts文件之前导入jquery文件
参考：
https://blog.csdn.net/u014465934/article/details/80556340
因为不是专业写web的，水平有限，如有错误，请指正，谢谢。