基于TuShare和ECharts的金融数据可视化

导言

之前写过一篇文章，介绍用python从网易财经抓取数据并使用matplotlib和R画出K线图。上述方法尤其适用的场景，有时候在交互式绘图方面显得力不从心，今天介绍以下基于ECharts进行交互绘图，并且我们将数据的获取方式进行更新，使用TuShare这个开源的财经数据接口获取需要的数据。

简介

首先介绍下TuShare和ECharts两个有用的工具。

TuShare

TuShare点击这里访问是一个由个人开发和维护的开源财经数据接口包，其中的数据包括股票的历史行情、实时行情数据、分类数据、财务数据和基本面的数据等，数据均是从第三方取到获取并包装，使用python对数据进行清洗和处理，最终的数据格式为Pandas中支持的data.frame格式的数据。

如TuShare本身介绍所述，该数据接口适用于量化投资分析师（Quant)、对金融市场进行大数据分析的企业和个人、金融公司以及学习利用python进行数据分析的人（包括学生）。所以如果你对金融分析感兴趣，而又不想付费使用商业的数据接口，Tushare是一个非常不错的选择，如果你觉得这个接口很好用，并且愿意适当支持作者，你也可以在Tushare的主页进行捐助.

ECharts

ECharts是一个纯粹的JavaScript库，由百度开发和维护的一个开源项目。这个百度的产品确实很赞，你可以在官网查看实例，并且可以修改实例来体验产品，可以发现基本上主流的图形都可以支持，而且由于文档有中文版，适合对英语阅读有困难的朋友。

另外，hexo其实是支持echarts模块的，其插件为hexo-tag-echarts3，并且你可以参考使用方法，对于此本文就不再展开说明了。

安装

安装TuShare

TuShare的安装很简单，可以在网站查看其的系统依赖，一般Python是最新版的都支持（包括Python2和Python3）。另外，因为tushare的数据格式为data.frame，因此要求python安装了Pandas库。使用命令安装如下：

以Mac OS为准，Linux和Windows参考网站的提示方法

pip install tushare   # Python2安装
pip3 install tushare  # Python3安装

# 如果安装报错，一般是没有安装Pandas，可以如下安装：
pip install pandas     # Python2安装
pip3 install pandas    # Python3安装

安装完就可以使用TuShare了。

安装ECharts

实际上ECharts可以下载到本地，并可以和你的web或者app程序打包应用，我们这次使用的ECharts不是使用本地调用代码，而是使用Python的一个模块，其中动态导入js脚本实现绘图。因此本次不用安装ECharts。

实现原理

在Python的Ipython中，有个display的模块，可以实现HTML效果的展示，更出彩的是Ipython Notebook中自带JS模块可以动态导入js脚本并执行。可以先看看示例（本文的示例均是使用Ipython)：

from Ipython.display import HTML

HTML('这是<font color=\'read\'>HTML代码</font>测试代码')

ECharts的基本用法

ECharts是个纯粹的JS图形库，所以其语言本质是Javascript语言。根据官网的示例，我们构建以下一个图形：

option = {
    title : {
        text: '各金融资产比重',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['股票','债券','基金','金融衍生品','现金及等价物']
    },
    series : [
        {
            name: '金融资产',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'债券'},
                {value:310, name:'基金'},
                {value:234, name:'现金及等价物'},
                {value:135, name:'金融衍生品'},
                {value:1548, name:'股票'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

对应的图形就如下所示，并且图形可以交互显示:

所以我们看到，ECharts基于javascript绘制图形，定义好图形的参数和数据，用浏览器渲染就能得到所需要的图形，我们本文就使用了TuShare获取数据，并对数据进行清洗和处理。

TuShare的基本用法

安装TuShare后可以直接使用，tushare有各种接口返回不同的数据，非常容易操作，例如：

import tushare as ts

price_by_day = ts.get_k_data(code='600000', ktype='D', autype='None', start='2017-01-01', end='2017-10-19')
price_by_day[0:10]

# 运行结果如下：
Out[5]:
         date   open  close   high    low    volume    code
0  2017-01-03  16.21  16.30  16.44  16.17  162371.0  600000
1  2017-01-04  16.29  16.33  16.35  16.18  296587.0  600000
2  2017-01-05  16.30  16.30  16.38  16.24  264376.0  600000
3  2017-01-06  16.30  16.18  16.30  16.13  171955.0  600000
4  2017-01-09  16.24  16.20  16.29  16.13  149087.0  600000
5  2017-01-10  16.18  16.19  16.24  16.14   79967.0  600000
6  2017-01-11  16.24  16.16  16.24  16.15   91933.0  600000
7  2017-01-12  16.18  16.12  16.20  16.11   82961.0  600000
8  2017-01-13  16.10  16.27  16.29  16.10  190341.0  600000
9  2017-01-16  16.23  16.56  16.60  16.10  533047.0  600000

示例中，我们使用了ts中的get_k_data方法，获取了股票代码为600000（浦发银行）的历史日数据，同样我们还可以使用其它接口获取其它的数据，甚至包括分时数据。

实现

股票的日K线图

根据以上我们的想法，首先

未完成，待续