Vue2集成EChart时chartData的watch监听器未触发致图表无法更新

核心问题 #

1. 子组件初始化未复用传入的chartData：当前initChart方法硬编码了默认图例和数据，没有利用父组件传递的chartData，导致初始渲染的图表并非父组件提供的数据。
2. 深度监听器未触发的潜在原因：
   • 父组件修改pieData时未遵循Vue2的响应式规则（如直接修改对象属性/数组元素却未使用Vue.set或重新赋值）；
   • 子组件的监听器缺少immediate: true配置，无法在组件初始化阶段立即执行回调。

修复步骤 #

1. 修正子组件初始化逻辑 #

修改initChart方法，直接使用props中的chartData初始化图表，替代硬编码的默认值：

initChart() {
  this.chart = echarts.init(this.$el, 'macarons');
  // 直接复用父组件传入的chartData
  this.setOptions(this.chartData.legend, this.chartData.data);
}

2. 完善监听器配置 #

给chartData的监听器添加immediate: true，确保组件初始化时就能触发回调，同时保留deep: true监听对象内部的深层变化：

watch: {
  chartData: {
    deep: true,
    immediate: true, // 新增配置，初始化时立即执行一次
    handler(val) {
      console.log('chartdata handler', val);
      this.setOptions(val.legend, val.data);
    }
  },
  width: {
    deep: true,
    handler(val) {
      console.log(' width',val);
    }
  }
}

3. 确保父组件数据修改的响应式 #

如果父组件需要动态更新pieData，必须遵循Vue2的响应式规则：

• 修改对象属性时：

  // 错误写法：直接修改属性无法触发响应式更新
  this.pieData.data[0].value = 200;
  // 正确写法1：使用Vue.set修改数组元素
  this.$set(this.pieData.data, 0, { value: 200, name: 'pepper' });
  // 正确写法2：重新赋值整个对象（更直观）
  this.pieData = {
    ...this.pieData,
    data: this.pieData.data.map(item => 
      item.name === 'pepper' ? { ...item, value: 200 } : item
    )
  };
  

• 修改数组时优先使用push、splice等Vue2支持的数组变异方法，或直接重新赋值数组。

4. 可选：添加窗口 resize 适配（优化体验） #

如果需要图表随容器大小自动调整，可在子组件中补充resize监听逻辑：

mounted() {
  this.$nextTick(() => {
    this.initChart();
    // 开启resize监听（依赖autoResize props）
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeChart);
    }
  });
},
beforeDestroy() {
  if (!this.chart) return;
  this.chart.dispose();
  this.chart = null;
  // 移除resize监听，避免内存泄漏
  if (this.autoResize) {
    window.removeEventListener('resize', this.resizeChart);
  }
},
methods: {
  resizeChart() {
    this.chart?.resize();
  },
  // ...其他已存在的方法
}

验证方式 #

1. 启动项目后，检查控制台是否输出chartdata handler，确认监听器已正常触发；
2. 修改父组件的pieData数据，观察图表是否同步更新。

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