工作需要开源可视化工具，经过superset和redash的调研，考虑到精美的图表ui和社区活跃度（github 29.6k stars）最终选择了superset。二开superset，一开始装的0.36版本，苦于找不到前端源码，碰巧发现github上0.34版本带有前端源码，说做就做，借鉴一位先行者的经验，对0.34版本的做了相应适配。
superset UI界面
superset安装采用下载git源代码，pip install -r requirements && pip install -e incubator-superset-0.34
安装node js
在package.json的dependencies里面新增"d3": "^3.5.17","echarts": "^4.7.0",
在包含package.json的目录下npm install
以集成echarts柱状折线图 mix-line-bar为例
前端主要修改的地方
- 前端图表逻辑 static/assets/src/visualizations/ 目录下新建EchartsTable/MixLineBar
- 新建文件夹 images 放入新增图表的图片
- 新增文件 transformProps.js 前端后端数据转换
- 新增文件 MixLineBar.js 前端渲染图表主要逻辑，设置json格式的option,使用echarts进行渲染 官方 构建新图表option 例子
- 新增文件 ReactMixLineBar.js 注册
- 新增文件 MixLineBarChartPlugin.js
- 注册插件 MixLineBarChartPlugin：修改 static/assets/src/visualizations/presets/MainPreset.js
- 添加viz type :static/assets/src/explore/components/controls/VizTypeControl.jsx
- 设置图表组件 static/assets/src/explore/controlPanels/MixLineBar.js
- 导入图表设置 static/assets/src/explore/controlPanels/index.js
- 配置新增组件 static/assets/src/explore/controls.jsx 配置4里面新增的组件
修改 superset/viz.py
1、找到 METRIC_KEYS 数组后 添加bar_metrics和line_metrics
2、新增
图表后端逻辑在包含package.json的目录下npm run dev
对y1，y2轴的刻度作了自适应，最终效果如下：
柱状折线图和漏斗图效果
参考文章：superset0.36接入echarts 图表：mix-line-bar