type
Post
status
Published
date
Apr 28, 2020 13:41
slug
summary
本文详细介绍了如何在Apache Superset中集成Echarts饼图组件的完整流程。从前端开发（创建插件结构、实现核心文件、注册组件、配置控制面板）到后端开发（修改viz.py、实现数据处理逻辑），涵盖了所有必要的代码实现和配置步骤。文章还展示了镂空和实心两种饼图效果，并探讨了业务分析、用户行为分析等实际应用场景。通过掌握这套方法，开发者可以轻松扩展Superset的可视化能力，打造符合特定业务需求的自定义图表。
tags
Superset
React
category
Data Engineering
icon
password
wordCount
2414
在数据可视化的世界里，Apache Superset 是一款强大的开源 BI 工具，但有时候它自带的图表类型可能无法满足我们的特定需求。本文将手把手教你如何在 Superset 中集成 Echarts 饼图组件，让你的数据可视化更加灵活多样。
核心内容
• 前端开发：创建自定义 Echarts 饼图组件
• 后端开发：实现数据处理和图表渲染逻辑
• 完整的代码实现和配置步骤
• 支持镂空/实心饼图、自定义图例位置等功能
实验环境
在开始我们的"魔法"之前，先确保你的工具箱里有这些东西：
- Windows10
- python 3.68
- pip 19.2.3
- setuptools 41.4.0
- nodejs 12.15.0
- npm 6.134
- superset 0.35
提示：虽然本文基于 Superset 0.35 版本，但整体思路同样适用于其他版本，只需要注意 API 的差异即可。
前端开发：让图表"活"起来
前端开发是整个集成过程的核心，我们需要创建一个完整的 Echarts 饼图插件。
创建项目结构
首先，在
visualizations 文件夹下创建 EchartsPie 文件夹，这将是我们的"根据地"。
在
images 文件夹里放入图表的缩略图。你可以去 Echarts 官网截个图，记得文件名要保持为 thumbnail.png，不然 Superset 可找不到它。核心文件实现
index.js - 插件入口
这是我们插件的"身份证"，告诉 Superset："嘿，我是一个新图表类型！"
transformProps.js - 数据转换器
这个文件就像一个"翻译官"，把前端和后端的数据"语言"互相翻译。
ReactEchartsPie.js - React 包装器
简单的一层包装，让我们的原生组件能在 React 世界中愉快地玩耍。
EchartsPie.js - 图表渲染核心
这是整个前端的"大脑"，负责把数据变成漂亮的饼图。
注册插件
修改 MainPreset.js
在
/visualizations/presets/MainPreset.js 中注册我们的新插件：
修改 VizTypeControl.jsx
让我们的饼图出现在图表类型选择列表中。修改
/explore/components/controls/VizTypeControl.jsx，在 DEFAULT_ORDER 变量中添加 'echarts_pie'：配置控制面板
创建 EchartsPie.js 控制面板
在
/explore/controlPanels/ 下新建 EchartsPie.js，这是用户配置图表的界面：
修改 controls.jsx
在
/explore/controls.jsx 文件最下面添加控制项定义：
修改 setupPlugins.ts
在
/setup/setupPlugins.ts 中注册控制面板：
安装 Echarts 依赖
修改
package.json，引入 Echarts npm 包（如果已经引入则跳过）：
后端开发：数据处理的"指挥官"
前端搭好了舞台，后端就要负责提供"演员"（数据）了。
修改 viz.py
添加 Metric 配置
实现图表类
在
viz_types 变量定义之前，添加 EchartsPieViz 类：运行与测试
安装依赖
如果还没有安装 Echarts，先安装：
编译前端
重新编译前端代码（这一步可能需要几分钟，去喝杯咖啡吧☕️）：
注意：编译过程中可能会遇到内存不足的问题，可以尝试增加 Node.js 的内存限制：
NODE_OPTIONS=--max_old_space_size=4096 npm run build启动 Superset
运行 Superset 后台，访问界面创建一个图表：
效果展示
镂空饼图
优雅的圆环设计，数据一目了然：
实心饼图
经典的饼图样式，简洁直观：
应用场景与扩展
这个自定义饼图组件可以应用在很多场景：
- 业务数据分析：展示各部门销售占比、市场份额分布等
- 用户行为分析：展示用户来源渠道、设备类型分布等
- 资源监控：展示服务器资源使用情况、存储空间分配等
你还可以基于这个实现进一步扩展：
- 添加动画效果，让图表更生动
- 支持多层嵌套饼图
- 添加数据钻取功能
- 实现图表主题定制
未来展望：随着 Superset 和 Echarts 的不断发展，我们可以期待更多开箱即用的图表类型。但掌握了自定义集成的方法，你就能打造真正符合业务需求的可视化方案。
总结
通过本文，我们完成了从零到一集成 Echarts 饼图到 Superset 的完整过程。这不仅仅是一个技术实现，更是一次对 Superset 架构的深入理解。
核心要点回顾：
- 前端开发：创建插件、配置控制面板、注册组件
- 后端开发：实现数据处理逻辑、定义图表类型
- 灵活配置：支持镂空/实心切换、图例位置自定义等
希望这篇文章能帮助你在数据可视化的道路上走得更远。如果你有任何问题或想法，欢迎交流探讨！