Superset 0.28三奏曲——安装、集成ECharts和汉化

前言

第一次写博客，本着共享知识而来，为技术的发展做点小贡献。最近在研究Superset安装、集成ECharts和汉化的工作，网上关于Superset的相关文章感觉挺少的，所以想写这一篇综合点的博客，来和大家共享，如有不足，请多指教。

1 环境和版本

操作系统：CentOS Linux release 7.5.1804 (Core)
python版本：3.6.4（直接安装Anaconda即可）

2 一奏曲——Superset安装(0.28版本)

Superset 0.22版本的看板中存在很多bug，比如：多个类型一样的图表加入到看板中，只有第一个图可以显示，其他同类型的图均显示不出。在最新版本中不存在，故建议安装最新版本Superset 0.28。
（1）万事开头难。首先咱们得要先安装Anaconda，因为接下来需要用到pip，去这里下载安装，最新Superset支持使用python3的版本。
（2）安装superset

pip install superset

划重点！用pip安装的最新版本Superset的目录与0.28.1版本源码有差异，其实是不全，去这里下载源码，下载好之后，要用源码中Superset\superset\assets下的src目录替换自己安装的superset的assets下的src目录即可，这个步骤为后续集成ECharts做准备。
（3）初始化

fabmanager create-admin --app superset   //创建管理员账号

superset db upgrade   //初始化数据库

superset load_examples   //载入模板数据

superset init   //初始化角色和权限

superset runserver -d -p 8088  //启动服务，端口号 8088，使用 -p 更改端口号

最后如果浏览器进入不了登录界面，这是因为防火墙的问题，打开就好了。
（4）后台运行superset
使用如下命令，就可以让superset在后台运行，就不用每一次启动服务了。

nohup superset runserver -d -p 8088 &

tail -f nohup.out 

有图有真相！

（5）安装编译前端需要的js包
这一步是为接下来的ECharts集成做准备，进入到superset\static\assets下，在命令行中输入

npm install

（6）编译前端
需要的包全部安装完之后，进入superset\static\assets下，在命令行中输入

npm run dev

这一步如果报错，排除语法和权限问题，是包没有安装全的原因，一定要把包安装全才行。
我遇到的是这两个错误：

ERROR in ./src/visualizations/index.js 86:19
Module parse failed: Unexpected token (86:19)
You may need an appropriate loader to handle this file type.
| var loadNvd3 = function () {
|   function loadNvd3() {
>     return loadVis(import( /* webpackChunkName: "nvd3_vis" */'./nvd3/adaptor.jsx'));
|   }
| 
 @ ./src/modules/AnnotationTypes.js 15:15-30
 @ ./src/chart/chartAction.js
 @ ./src/explore/components/ExploreViewContainer.jsx
 @ ./src/explore/App.jsx
 @ ./src/explore/index.jsx
 @ multi babel-polyfill ./src/explore/index.jsx

把包安装全之后，再执行npm run dev命令，编译就通过了。之后在ECharts集成时就可以看到实时编译的网页效果了。

3 二奏曲——Superset集成ECharts（重点）

Superset集成ECharts其实说来也简单，主要操作5个地方，分别是：
(1)后端文件
处理传入前端的数据格式
superset/viz.py
(2)前后端函数匹配文件
superset/static/assets/src/visualizations/index.js
(3)你的新增图表名称.js
superset/static/assets/src/visualizations/你的新增图表名称.js
(4)前端图标配置区组件设置
它是Superset左侧的GroupBy等组件的开关，需根据你新增的图表要用的数据格式选择合适的组件
superset/static/assets/src/explore/visTypes.jsx
(5)缩略图
superset/static/assets/images/viz_thumbnails
下面来举两个集成Echarts图表的例子

3.1 极坐标柱状图

(1)后端文件
进入到superset/viz.py文件中，在BaseViz类的下方和TableViz的上方加入如下代码(与其他的相似)：

class EchartsBarPolar(BaseViz):
    viz_type = 'echarts_bar_polar' #对应前端的名字
    is