最近忙著寫數(shù)據(jù)可視化的東西，簡書也很久沒有寫了摄悯，我是基于flask+echarts做的數(shù)據(jù)可視化峡竣。
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: '城市人口數(shù)'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['今日數(shù)據(jù)']
},
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:'最多數(shù)量',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},]
});
myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
var names=[]; //名稱數(shù)組（實際用來盛放X軸坐標值）
var nums=[]; //數(shù)量數(shù)組（實際用來盛放Y坐標值）
$.ajax({
type : "get",
url : "http://127.0.0.1:5000/echarts", //請求發(fā)送到Servlet處
// data : {},
dataType : "json", //返回數(shù)據(jù)形式為json
success : function(result) {
//請求成功時執(zhí)行該函數(shù)內(nèi)容凛澎，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"]); //挨個取出名稱并填入類別數(shù)組
}
for(var i=0;i<result["data"].length;i++){
// alert(result["data"][i]["num"]);
nums.push(result["data"][i]["num"]); //挨個取出數(shù)量并填入銷量數(shù)組
}
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數(shù)據(jù)圖表
xAxis: {
data: names
},
series: [{
// 根據(jù)名字對應到相應的系列
name: '數(shù)量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//請求失敗時執(zhí)行該函數(shù)
alert("圖表請求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
數(shù)據(jù)庫數(shù)據(jù)
CB2578E3-20AF-49FA-BAEE-545BBD525392.png
展示出來的圖像
A918F081-E83B-46EB-AA9B-F03E5E748D29.png
