FLASK簡(jiǎn)介
Flask是Armin ronacher用 Python 語言基于 Werkzeug 工具箱編寫的輕量級(jí)Web開發(fā)框架。其 WSGI 工具箱采用 Werkzeug（路由模塊）熙兔，模板引擎則使用 Jinja2悲伶。這兩個(gè)也是 Flask 框架的核心。網(wǎng)上對(duì)此介紹較多住涉，具體可以參見：http://flask.pocoo.org/麸锉。
Echarts簡(jiǎn)介
ECharts，是一個(gè)純 Javascript 的圖表庫舆声，可在 PC 和移動(dòng)設(shè)備上運(yùn)行花沉，兼容當(dāng)前大部分瀏覽器，底層依賴Canvas 類庫 ZRender媳握，提供可個(gè)性化定制的數(shù)據(jù)可視化圖表碱屁。
ECharts是由數(shù)據(jù)驅(qū)動(dòng)，通過數(shù)據(jù)的變化驅(qū)動(dòng)圖表展現(xiàn)的改變蛾找。編程過程就是獲取數(shù)據(jù)娩脾，填入數(shù)據(jù)，系統(tǒng)自動(dòng)過度表現(xiàn)數(shù)據(jù)的變化打毛。Echarts提供了折線圖晦雨、柱狀圖架曹、散點(diǎn)圖、餅圖闹瞧、K線圖等組件绑雄，以及用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖奥邮，熱力圖万牺，線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖洽腺，treemap脚粟，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖蘸朋，儀表盤核无，并且支持圖與圖之間的組合。具體可以參見：http://echarts.baidu.com/index.html藕坯。
FLASK+Echarts構(gòu)建數(shù)據(jù)繪圖網(wǎng)站
STEP1
參考如下代碼团南，構(gòu)建FLASK實(shí)例
from flask import Flask # 導(dǎo)入flask類
#flask 類的實(shí)例化
app = Flask(__name__)
# flask 路由地址 /
@app.route('/admin',methods=['GET','POST'])
def admin():
return 'Hello Flask'
if __name__ == '__main__':
app.run() # 運(yùn)行flask
STEP2
在服務(wù)器端，獲取和處理外部數(shù)據(jù)炼彪。以下僅為示例吐根，具體應(yīng)用需要進(jìn)一步優(yōu)化處理。
import csv
import pandas as pd
from io import BytesIO
from urllib import request as url_req
@main.route('/admin',methods=['GET','POST'])
def admin():
# 僅做示例辐马。從chinamoney網(wǎng)站獲取FR007拷橘、DR007數(shù)據(jù)，跨度1年喜爷。
url='http://www.chinamoney.com.cn/dqs/rest/cm-u-bk-currency/FrrHisExcel?lang=CN&startDate=2017-10-10&endDate=2018-10-09'
s = url_req.urlopen(url).read()#.decode() # 1 讀取數(shù)據(jù)串
dfile=BytesIO(s)
creader = pd.read_excel(dfile) # dfile
tmp_creader = creader[:-2]
tmp_creader = tmp_creader.sort_values('交易日期')
date_list = tmp_creader['交易日期'].tolist()
FR007_list = tmp_creader['FR007(%)'].tolist()
DR007_list = tmp_creader['FDR007(%)'].tolist()
SPREAD_list = (tmp_creader['FR007(%)'] - tmp_creader['FDR007(%)']) *100.0
SPREAD_list = np.around(SPREAD_list,0).tolist()
return render_template('index1.html',date_list=date_list, \
FR007_list = FR007_list, \
DR007_list = DR007_list, \
SPREAD_list = SPREAD_list)
STEP3
在“templates”文件下的index1.html中冗疮，使用javascript制作Echarts圖例。實(shí)現(xiàn)兩圖并列檩帐。
<div id="main2" style="width: 800px;height:600px;margin: 0 auto;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom术幔，初始化echarts實(shí)例
var myChart2 = echarts.init(document.getElementById('main2'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option2 = {
title: {
text: '貨幣市場(chǎng)利率'
},
tooltip: {
trigger:'axis'
},
legend: {
data:['FR007','DR007','SPREAD']
},
xAxis: [{
type: 'category',
boundaryGap:false,
//nameRotate:30,
data: {{date_list|safe}} ,
gridIndex: 0
},
{
type: 'category',
boundaryGap:false,
//nameRotate:30,
data: {{date_list|safe}} ,
gridIndex:1
}],
// 定義雙Y軸
yAxis: [{
type: 'value',
name: 'RATE(%)',
gridIndex: 0
},
{
type: 'value',
name: 'FR-DR(bp)',
gridIndex: 1
}],
grid: [{
bottom: '50%'
}, {
top: '60%'
}],
series: [{
name: 'FR007',
type: 'line',
data: {{FR007_list}},
},
{
name: 'DR007',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: {{DR007_list}}
} ,
{
name: 'SPREAD',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: {{SPREAD_list }}
} ]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart2.setOption(option2);
</script>
STEP4
展示效果
本人購買了云服務(wù)器轿塔，并在上面部署了FLASK+Echarts構(gòu)建的網(wǎng)站特愿，供學(xué)習(xí)交流仲墨。
