echarts和pyecharts复用options

1.业务场景

现在遇到一个场景，需要在web页面的前端用echarts绘图，然后又需要在python后端生成echarts绘图的图片。
原来后端采用matplotlib生成图片，但是为了保证图片和web页面图表的一致性，和降低编码难度采用echarts在web页面绘制图表，采用pyecharts+snapshot进行后端生成图片。

2.简介一下这俩框架

Echarts

Echarts是一个非常优秀的可视化框架，由百度开源，提供了非常丰富的图表类型。

Github地址：https://github.com/apache/incubator-echarts
官网地址：echartsjs.com/zh/index.html

值得一提的是，官网支持中文，英语不好的同学省了不少心。
建议使用4.x版本，因为我在18年1月时就已经退出了4.x版本，经过2年左右的发展和维护，4.x版本已经很稳定了，而且在github上拥有高达37k starts。

pyecharts

pyecharts是一款将echarts封装到python中的一款开源框架，由国内几个大哥写的，源码拜读了些许，感觉封装的很有层次感，pythonic十足。

Github地址： https://github.com/pyecharts/pyecharts
官网地址： https://pyecharts.org/#/zh-cn/

注意，虽然这个框架没出多久，但是已经更迭到V1.0版本了，从1.0起只支持python 3.6以上的版本，所以想要引入pyecharts的时候需要考虑，老项目的python版本是否满足需要，以及依赖包版本是否冲突。

3.复用options

用过echarts的同学都知道，它提供了一个叫setOptions的方法，通过这个方法我们传入一个options就可以生成一个图表了。
对开发者而言，这是非常方便的，我们只需维护这个options变量就OK了。
转过头看pyecharts，由于对echarts进行了封装，所以需要源码安装，看看人家是怎么封装的，才能知道怎么用啊。

3.1 源码安装pyecharts

先进入到一个你打算存放pyecharts的文件夹，然后执行下面命令从github上下载源码。

$ git clone https://github.com/pyecharts/pyecharts.git

等待下载完毕，然后在下载好的目录中会有一个setup.py文件，没错这就是python包的安装文件，然后执行下列命令:

$ python setup.py install

然后就开始安装了，等待安装完毕，就可以查看pyecharts的源码了。

3.2 开始学习使用pycharts

我是直接看的“5分钟上手”，地址：5分钟上手

image.png

3.3 发现端倪

找了一圈，没有发现setOptions方法，这样一来就无法达到复用options的目的了，于是打算进入源码中探寻细节。
例子里是一个Bar 直方图类，循着父类网上找，最终找到了Base类，官方文档也说了Base类是所有图表类基类，所以options有很大概率是在这里被初始化的。

Base图表基类

聪明的你一定和我一样一开始啥也没看出来，看看红框中的内容，眼熟不？
没错，在Base类中有一个叫options的属性，就是我们寻找良久的options。
再接着想，这样我们就不用再根据图表的类型分别实例化了吧，直接一个Base类就搞定了。

3.4 验证猜想

以上纯属推测，验证一下呗。

import json

from pyecharts.charts.base import Base

options =  {
        'title': {
            'text': 'ECharts 入门示例'
        },
        'tooltip': {},
        'legend': {
            'data': ['销量']
        },
        'xAxis': {
            'data': ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        'yAxis': {},
        'series': [{
            'name': '销量',
            'type': 'bar',
            'data': [5, 20, 36, 10, 10, 20]
        }]
    }

chart = Base()
chart.options = options
html_path = "rectangle_diagram.html"
chart.render(html_path)

然后在你的项目的目录下会生成一个叫rectangle_diagram.html的文件，没错就是他了，用浏览器打开就能看到图表了。