Apache ECharts 在 Vue 3 中使用 TreeMap 的注意事项

Apache ECharts 是一个功能强大的数据可视化库，而 TreeMap（矩形树图）是其提供的一种常用图表类型。在 Vue 3 中使用 ECharts 的 TreeMap 时，开发者可能会遇到一些特殊问题，需要特别注意。

问题现象

当在 Vue 3 项目中集成 ECharts 的 TreeMap 组件时，常见的问题包括：

• 图表在交互（如点击节点）后突然消失
• 图表缩小到左上角
• 缩放或钻取操作导致图表异常

根本原因

这些问题通常与 Vue 3 的响应式系统有关。ECharts 实例被错误地包装在响应式对象中，导致 Vue 的响应式代理干扰了 ECharts 的正常操作。

解决方案

方案一：使用 shallowRef

const chart = shallowRef(null);

shallowRef 创建一个浅层的响应式引用，不会深度转换内部值，适合用于 ECharts 实例。

方案二：使用普通变量（推荐）

更推荐使用非响应式的普通变量来存储 ECharts 实例：

let chart = null;

const updateChart = () => {
  chart.setOption({
    // 图表配置
  });
};

onMounted(() => {
  chart = echarts.init(document.getElementById("main"), "dark");
  updateChart();
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
});

最佳实践

1. 避免响应式包装：ECharts 实例不需要响应式，直接使用普通变量存储即可
2. 资源管理：务必在组件卸载时销毁 ECharts 实例，避免内存泄漏
3. 配置更新：通过单独的方法更新图表配置，保持代码结构清晰
4. 主题设置：初始化时可以直接指定主题，如示例中的"dark"主题

总结

在 Vue 3 中集成 Apache ECharts 的 TreeMap 时，正确处理 ECharts 实例的存储方式是关键。避免不必要的响应式包装可以解决大多数交互异常问题。同时，良好的资源管理习惯可以确保应用的稳定性和性能。