数据可视化：D3.js、ECharts 与 AntV 的选型和性能检查

数据可视化：D3.js、ECharts 与 AntV 的选型和性能检查

可视化的第一步是回答问题，而不是选图库。D3.js 适合细粒度定制，ECharts 和 AntV 更适合常见业务图表。

1. 先按交互与定制程度选库

数据点过多时先聚合、采样或分层展示。频繁更新要做节流或批量合并，并在组件卸载时释放图表实例。

2. 高频更新要合并

chart.setOption({ series: [{ data: nextData }] });

更新前先聚合或节流，避免每条数据都触发完整 diff。组件卸载时释放实例与事件监听，重新初始化前也要处理旧对象。

3. 性能检查固定数据和交互

固定数据点数量、更新频率、浏览器和交互路径，记录脚本、布局、绘制与内存。只给最终 FPS，无法解释库或配置的差异。

4. 空数据和键盘交互不能漏

除了功能正确性，还要检查加载失败、空数据、重复操作、键盘可用性和组件卸载后的资源清理。涉及服务端的策略需要与接口约定一起验证。

5. 小结

先建立可复现的基线，再做小范围调整并复测。这样得到的结论才能用于后续维护。