从零到一：在Superset中打造炫酷的Echarts中国地图可视化组件

type

Post

status

Published

date

May 21, 2020 10:19

slug

summary

本文是一份完整的技术实战指南，详细讲解如何将Echarts的中国地图组件深度集成到Apache Superset数据可视化平台中。教程涵盖完整的开发链路：前端部分包括React组件封装、Echarts配置、插件注册和控件开发，后端部分包括Python数据处理、省份名称标准化和SQLite查询优化。文章提供了可直接使用的完整代码实现，包括地图渲染、tooltip交互、visualMap配置、特效散点等核心功能。此外还介绍了三种实用配置选项（visualMap、显示点、显示省份）及其应用场景，涵盖商业分析（销售分布、用户地域分析、物流监控）和公共服务（疫情监控、天气预警、人口统计）等多个领域。基于Windows 10、Python 3.6.8、Node.js 12.15.0和Superset 0.35环境验证，同样适用于Linux和macOS系统。通过本教程，你将掌握Superset自定义可视化组件的完整开发流程，学会将第三方图表库无缝集成到Superset，并为后续扩展更多Echarts图表类型（如省份下钻、移动端优化等）打下坚实基础。

前言

Apache Superset是一个现代化的数据可视化平台，而Echarts则以其丰富的图表类型和优秀的交互体验著称。当Superset遇上Echarts的中国地图，会擦出怎样的火花？本文将带你一步步完成这个强大的集成，让你的数据可视化平台如虎添翼。

🎯

核心要点

本教程涵盖从前端到后端的完整开发流程，包括React组件封装、Echarts配置、以及Superset后端数据处理。完成后，你将拥有一个功能完整、交互丰富的中国地图可视化组件。

环境准备

在开始这段奇妙的旅程之前，让我们先确认一下装备是否齐全。毕竟，"工欲善其事，必先利其器"嘛！

软件依赖

软件	最低版本	推荐版本
Python	3.6	Latest
Pip	-	Latest
Node.js	-	Latest

实验环境

本教程基于以下环境完成开发和测试：

操作系统: Windows 10

Python: 3.6.8

Pip: 19.2.3

Setuptools: 41.4.0

Node.js: 12.15.0

NPM: 6.13.4

Superset: 0.35

💡

温馨提示: 虽然本教程基于Windows环境，但相同的步骤也适用于Linux和macOS系统。只需注意路径分隔符的差异即可（Windows用反斜杠\，Linux/Mac用正斜杠/）。

前端开发：打造炫酷的地图组件

前端部分是整个集成的灵魂所在。我们要做的，就是把Echarts的地图能力包装成Superset能识别的"方言"。

第一步：搭建组件的家

在visualizations文件夹下创建EchartsMapChina文件夹，这将是我们地图组件的温馨小窝。

接着在images文件夹里放入图表的缩略图。你可以访问Echarts官网截取一张漂亮的地图示例图。

⚠️

重要提醒: 缩略图文件名必须是thumbnail.png，这不是建议，是硬性要求！否则Superset会一脸茫然地说"这是啥玩意儿？"

第二步：核心文件实现

index.js - 组件的"身份证"

这是插件的注册文件，相当于向Superset自我介绍："嘿，我是新来的Echarts中国地图，请多关照！"

transformProps.js - 数据的"翻译官"

Superset说的是"Superset语"，我们的组件说的是"Echarts语"，这个文件就是负责在两者之间做翻译的：

ReactEchartsChinaMap.js - React适配层

这个文件很简单，就是把我们的组件包装成React喜欢的样子：

EchartsChinaMap.js - 魔法发生的地方

这是最核心、最有趣的文件！所有Echarts地图的配置和渲染逻辑都在这里。代码有点长，但别担心，每一行都充满了魔力✨

第三步：注册插件到Superset

现在组件已经写好了，但Superset还不认识它。我们需要做一系列"介绍"工作。

修改MainPreset.js

在/visualizations/presets/MainPreset.js中注册我们的插件：

修改VizTypeControl.jsx

在/explore/components/controls/VizTypeControl.jsx中，把'echarts_china_map'加入可视化类型列表：

创建控制面板配置

新建/explore/controlPanels/echartsChinaMap.js，定义图表的配置选项面板：

修改controls.jsx

在/explore/controls.jsx文件最下面添加自定义控件定义：

修改setupPlugins.ts

在/setup/setupPlugins.ts中注册控制面板：

安装Echarts依赖

最后，修改\superset\assets\package.json，在dependencies下增加：

然后在命令行运行：

后端开发：让数据流动起来

前端的舞台搭好了，现在该让后端为它提供"养料"了。

修改viz.py

添加metric key

在superset/viz.py中找到METRIC_KEYS并添加我们的metric：

添加可视化处理类

在viz_types前添加核心的数据处理类（这是后端的大脑🧠）：

✨

代码亮点: to_series方法中的省份名称标准化处理非常关键！它会自动去除"省"、"市"、"自治区"等后缀，确保数据能准确匹配到地图上的省份。

运用场景：地图的N种玩法

集成完成后，这个中国地图组件能做什么呢？让我们脑洞大开一下：

商业分析场景

销售数据可视化: 展示全国各省的销售额，一眼看出哪个省是业绩王者👑

用户分布分析: 显示用户注册量的地域分布，为市场策略提供数据支撑

物流网络监控: 实时展示各省的订单量和配送情况

公共服务场景

疫情数据监控: 展示各地确诊、疑似病例数量（希望永远用不到！）

天气预警系统: 可视化极端天气的影响范围

人口统计展示: 各省人口数量、增长率等数据

配置选项说明

我们的组件提供了三个实用的配置选项：

配置项	功能说明	使用建议
visualMap	显示颜色映射条，让数据大小一目了然	数据范围较大时建议开启
显示点	在地图上显示特效散点动画	想要酷炫效果时开启✨
显示省份	在地图上显示省份名称标签	需要清晰标识时开启

总结

经过这一番折腾，我们成功地把Echarts的中国地图整合到了Superset中。从前端的React组件封装，到后端的数据处理逻辑，每一步都在为最终的可视化效果添砖加瓦。

关键收获：

掌握了Superset自定义可视化组件的完整流程

学会了如何将第三方图表库集成到Superset

了解了前后端数据流转的完整链路

下一步：

你可以基于这个基础，继续扩展更多功能：

添加省份下钻功能，点击省份查看城市数据

集成更多Echarts图表类型（折线图、柱状图等）

优化移动端显示效果

数据可视化的世界很精彩，而你已经掌握了打开这扇门的钥匙🔑。现在，去创造属于你自己的精彩吧！

参考资料

Apache Superset官方文档

Echarts官方文档

Echarts地图示例