FLASK简介
Flask是Armin ronacher用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架。其 WSGI 工具箱采用 Werkzeug（路由模块），模板引擎则使用 Jinja2。这两个也是 Flask 框架的核心。网上对此介绍较多，具体可以参见：http://flask.pocoo.org/。
Echarts简介
ECharts，是一个纯 Javascript 的图表库，可在 PC 和移动设备上运行，兼容当前大部分浏览器，底层依赖Canvas 类库 ZRender，提供可个性化定制的数据可视化图表。
ECharts是由数据驱动，通过数据的变化驱动图表展现的改变。编程过程就是获取数据，填入数据，系统自动过度表现数据的变化。Echarts提供了折线图、柱状图、散点图、饼图、K线图等组件，以及用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的组合。具体可以参见：http://echarts.baidu.com/index.html。
FLASK+Echarts构建数据绘图网站
STEP1
参考如下代码，构建FLASK实例
from flask import Flask # 导入flask类
#flask 类的实例化
app = Flask(__name__)
# flask 路由地址 /
@app.route('/admin',methods=['GET','POST'])
def admin():
return 'Hello Flask'
if __name__ == '__main__':
app.run() # 运行flask
STEP2
在服务器端，获取和处理外部数据。以下仅为示例，具体应用需要进一步优化处理。
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网站获取FR007、DR007数据，跨度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 读取数据串
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图例。实现两图并列。
<div id="main2" style="width: 800px;height:600px;margin: 0 auto;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option2 = {
title: {
text: '货币市场利率'
},
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 }}
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
</script>
STEP4
展示效果
货币市场利率.JPG
本人购买了云服务器，并在上面部署了FLASK+Echarts构建的网站，供学习交流。
网友评论