ECharts复用DOM时的图表更新方法及两种初始化方式对比

一、复用DOM时如何更新图表数据与样式 #

当你通过以下方式获取DOM并初始化ECharts实例后：

var dom = document.getElementById('id');
var myChart = echarts.init(dom);

无需重新初始化实例，直接使用myChart.setOption()方法即可更新图表的数据、标签或样式。该方法会自动对比新旧配置项，仅更新有变化的部分，高效实现图表更新。

示例代码：

// 初始化基础配置
var baseOption = {
  title: { text: '初始图表' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};
myChart.setOption(baseOption);

// 定义更新函数，动态修改数据和样式
function updateChart(newData, newTitle) {
  var newOption = {
    title: { text: newTitle },
    series: [{ data: newData }]
  };
  myChart.setOption(newOption);
}

// 调用函数生成目标样式图表
updateChart([50, 30, 40], '更新后的图表');

二、变量切换数据与重复调用echarts.init()的差异 #

1. 变量切换数据的可行性 #

你提到的通过字典、列表索引动态切换数据的方式完全可行，本质是动态生成不同配置项后，通过setOption更新图表。示例代码如下：

// 定义数据字典
var myDictionary = {
  list1: [10, 20, 30],
  list2: [40, 50, 60],
  list3: [70, 80, 90]
};
var names = ['list1', 'list2', 'list3'];

// 生成第一张图表
var x = names[0];
myChart.setOption({
  series: [{ data: myDictionary[x] }]
});

// 生成第二张图表
x = names[1];
myChart.setOption({
  series: [{ data: myDictionary[x] }]
});

2. 与重复init的核心差异 #

• 性能损耗：重复调用echarts.init(document.getElementById('id'))会销毁旧实例并重新创建，带来额外DOM操作和资源开销，频繁切换时性能下降明显；复用实例调用setOption仅更新差异部分，性能更优。
• 状态保留：重复init会丢失之前图表的交互状态（如用户缩放、选中的数据项）；复用实例可保留这些状态，提升用户体验。
• 代码维护性：复用实例无需重复执行DOM获取和初始化逻辑，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Jlv