利用FLASK+ECharts构建网站

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构建的网站，供学习交流。

http://111.231.194.77:8080/main/admin