flask+echarts数据可视化
2019-04-10 本文已影响0人
乔治大叔
最近忙着写数据可视化的东西，简书也很久没有写了，我是基于flask+echarts做的数据可视化。
app.py中
from flask import Flask, render_template, Response
import json
app = Flask(__name__)
app.debug = True
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/index')
def index():
return render_template('index.html')
def Response_headers(content):
resp = Response(content)
resp.headers['Access-Control-Allow-Origin'] = '*'
return resp
@app.route('/echarts',methods=['GET','POST'])
def echarts():
import pymysql
lst = []
conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123',database='renkou',charset='utf8')
cur = conn.cursor()
cur.execute("""
select * from china_population;
""")
for row in cur.fetchall():
dic = {}
dic['name'] = row[1]
dic['num'] = row[2]
lst.append(dic)
datas = {
"data": lst
}
content = json.dumps(datas)
resp = Response_headers(content)
return resp
@app.errorhandler(403)
def page_not_found(error):
content = json.dumps({"error_code": "403"})
resp = Response_headers(content)
return resp
@app.errorhandler(404)
def page_not_found(error):
content = json.dumps({"error_code": "404"})
resp = Response_headers(content)
return resp
@app.errorhandler(400)
def page_not_found(error):
content = json.dumps({"error_code": "400"})
resp = Response_headers(content)
return resp
@app.errorhandler(410)
def page_not_found(error):
content = json.dumps({"error_code": "410"})
resp = Response_headers(content)
return resp
@app.errorhandler(500)
def page_not_found(error):
content = json.dumps({"error_code": "500"})
resp = Response_headers(content)
return resp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="/static/echarts.min.js"></script>
<script src="/static/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var a = echarts;
var myChart = a.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '城市人口数'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['今日数据']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
// restore : {show: true},
// saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series : [
{
name:'最多数量',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //名称数组（实际用来盛放X轴坐标值）
var nums=[]; //数量数组（实际用来盛放Y坐标值）
$.ajax({
type : "get",
url : "http://127.0.0.1:5000/echarts", //请求发送到Servlet处
// data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
// alert(result["data"]);
for(var i=0;i<result["data"].length;i++){
// alert(result["data"][i]["name"]);
names.push(result["data"][i]["name"]); //挨个取出名称并填入类别数组
}
for(var i=0;i<result["data"].length;i++){
// alert(result["data"][i]["num"]);
nums.push(result["data"][i]["num"]); //挨个取出数量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '数量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
数据库数据
CB2578E3-20AF-49FA-BAEE-545BBD525392.png
展示出来的图像
A918F081-E83B-46EB-AA9B-F03E5E748D29.png
