组件间响应通信实现多ECharts图表点击触发resize功能的问题咨询

问题根因 #

你之前使用的onclick = function () { myChart.resize(); }是直接给全局window对象绑定点击事件，后面的绑定会覆盖之前的配置，因此多图表场景下只会有最后一个绑定的图表resize生效。

解决方案 #

方案1：给每个图表的挂载DOM单独绑定点击事件 #

在每个图表实例初始化时，直接给对应挂载DOM绑定独立的点击监听，不会互相覆盖：

// 单个图表组件内的示例代码
const chartDom = document.getElementById('你的图表容器ID')
const myChart = echarts.init(chartDom)
// 仅给当前图表的DOM绑定点击事件
chartDom.addEventListener('click', () => {
  myChart.resize()
})

方案2：绑定到盒子展开触发事件（适配动画场景） #

如果你的盒子有单独的展开/收起触发按钮，建议把resize逻辑绑定到触发按钮的点击事件上，同时延迟执行适配动画时长，避免尺寸计算错误：

const expandBtn = document.getElementById('你的盒子展开按钮ID')
const chartDom = document.getElementById('你的图表容器ID')
const myChart = echarts.init(chartDom)

expandBtn.addEventListener('click', () => {
  // 延迟时长和你CSS中定义的盒子动画时长保持一致即可
  setTimeout(() => {
    myChart.resize()
  }, 300)
})

组件化开发注意事项 #

每个图表组件单独维护自己的echarts实例、事件监听，不要使用全局变量存储实例，从根源避免多实例冲突。

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