echarts 折线图 设置y轴最小刻度_win10系统superset0.34集成echarts

工作需要开源可视化工具，经过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为例前端主要修改的地方

1. 前端图表逻辑static/assets/src/visualizations/ 目录下新建EchartsTable/MixLineBar

• 新建文件夹 images 放入新增图表的图片
• 新增文件 transformProps.js 前端后端数据转换
• 新增文件 MixLineBar.js 前端渲染图表主要逻辑，设置json格式的option,使用echarts进行渲染官方 构建新图表option 例子
• 新增文件 ReactMixLineBar.js 注册
• 新增文件 MixLineBarChartPlugin.js

1. 注册插件MixLineBarChartPlugin：修改 static/assets/src/visualizations/presets/MainPreset.js
2. 添加viz type:static/assets/src/explore/components/controls/VizTypeControl.jsx
3. 设置图表组件 static/assets/src/explore/controlPanels/MixLineBar.js
4. 导入图表设置 static/assets/src/explore/controlPanels/index.js
5. 配置新增组件 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