内容摘要：ECharts 的 setOption 调用里藏着一个大多数教程不会提的坑：当你第二次传入配置对象时，它默认做的是合并，不是替换。这意味着上一轮渲染残留的 series 数据会悄悄留下来，图表看起来"

ECharts 的数视化实训 setOption 调用里藏着一个大多数教程不会提的坑：当你第二次传入配置对象时，它默认做的第章是合并，不是数视化实训替换。这意味着上一轮渲染残留的第章 series 数据会悄悄留下来，图表看起来"多了几条线"，数视化实训而你盯着代码反复检查却找不到原因。第章解决办法是数视化实训用 notMerge: true 参数强制全量替换——一行代码，省掉两小时排查。第章

这周实训的数视化实训核心任务是拿一份电商销售数据集做多维可视化。数据集本身不复杂：三个 CSV 文件，第章分别是数视化实训订单表、商品维表和地区表，第章加起来不到 4MB。数视化实训但真正动手时才发现，第章数据清洗占掉了将近一半时间。数视化实训订单表里的日期字段混了三种格式，"2024/1/5"、"2024-01-05"、"Jan 5, 2024" 都有，用 Pandas 的 to_datetime 加 format='mixed' 才统一解析成功。这种脏数据在真实业务里太常见了，教材上的示例数据永远干干净净，实际项目里能有一半字段直接可用就算运气好。

可视化方案我选了 ECharts 做主力，D3.js 只在一个需要自定义桑基图的场景里用了一下。ECharts 的好处是配置驱动，上手快，但配置项一多就容易乱。我的做法是把每个图表的 option 拆成独立函数，比如 buildBarOption(data)、buildMapOption(data)，各自返回配置对象，主流程只负责调用和挂载。这样调试时能快速定位是哪个图表出了问题，不用在一千多行的配置对象里翻找。

地图那块花的时间最多。ECharts 5 之后不再内置地图 JSON，需要自己去阿里云 DataV 下载 GeoJSON 注册。echarts.registerMap('china', geoJson) 这行代码本身简单，但如果 GeoJSON 的坐标系不是 WGS84，省份边界就会偏移。我一开始下载的版本用了 GCJ02，导致新疆和西藏的轮廓明显往东偏了一截，换成 WGS84 版本后才对齐。这个细节网上很多教程没提，踩过一次就记住了。

交互方面做了一个联动效果：点击柱状图的某个省份，右侧的散点图自动筛选出该省的数据点。实现思路不复杂，监听柱状图的 click 事件，拿到省份名后调用散点图的 dispatchAction 触发筛选。但要注意事件解绑的问题——如果页面需要重新渲染，旧的监听器不清掉会导致重复触发，点击一次执行两次筛选逻辑。用 chart.off('click') 先清再绑，养成习惯就好。

配色这件事比想象中重要。我最初用的是 ECharts 默认色板，十个颜色排下来，相邻的两个蓝色系几乎分不清。后来换成 #5470c6、#ee6666、#fac858 这组对比度更高的方案，可读性明显提升。数据可视化不是做美术设计，但配色直接影响信息传达效率，该花的时间省不掉。

最后交付的页面是一个单页应用，左侧导航切换不同图表，右侧主区域渲染。没有用框架，原生 JS 加 ECharts CDN 引入，总共不到 600 行代码。回头看，实训的价值不在于学会了某个 API，而在于把"数据→清洗→映射→渲染→交互"这条链路完整走了一遍。中间每个环节都会出问题，解决问题的过程才是真正长本事的地方。