Vue 使用 Echart 数据刷新的问题

vue版本：2.6.14
Echarts版本：5.3.3

场景描述：在父组件中A.vue引入了子组件B.vue，B.vue实现了对Echart的简单封装，A组件通过 props 向子组件B中传递数据，现在想让A组件中图表数据的变化同步到子组件B中，最初写法：
A.vue

<template>
  <div class="echart-wapper">
        // B组件即 BarChart
        <BarChart ref="chart" :option="option"></BarChart>
  </div>
</template>
<script>
export default {
    data() {
      return {
        option: {}
      }
    },
    created() {
      this.option = [
            { month: '1', count: Math.ceil(Math.random() * 100 + 1) },
            { month: '2', count: Math.ceil(Math.random() * 100 + 1) },
            { month: '3', count: Math.ceil(Math.random() * 100 + 1) },
            { month: '4', count: Math.ceil(Math.random() * 100 + 1) },
            { month: '5', count: Math.ceil(Math.random() * 100 + 1) },
            { month: '6', count: Math.ceil(Math.random() * 100 + 1) }
          ]
      this.$refs.chart.refreshChart()
    }
}
</script>

B.vue

<template>
  <div id="barchart-container">
    <div id="BarChart" ref="BarChart"></div>
  </div>
</template>
<script>
export default {
  name: 'BarChart',
  props: {
    // 图表配置
    option: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 当前图表
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.BarChart)
      this.chart.setOption(this.option)
    },
    refreshChart() {
      this.chart.setOption(this.option)
    }
  }
}
</script>
<style>
</style>

出现的问题：子组件B中的图表并无变化，并且当通过下列列表放入不同数据时，点击不同的列表项图表展示的数据会错乱
最后解决通过在子组件 refreshChart 方法中使用 vue 的 $nextTick 方法解决问题：
B.vue

<template>
  <div id="barchart-container">
    <div id="BarChart" ref="BarChart"></div>
  </div>
</template>
<script>
export default {
  name: 'BarChart',
  props: {
    // 图表配置
    option: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 当前图表
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.BarChart)
      this.chart.setOption(this.option)
    },
    refreshChart() {
      // 要在数据改变并且 DOM 重新渲染之后再重新设置图表配置，否则不会生效
      this.$nextTick(() => {
        this.chart.setOption(this.option)
      })
    }
  }
}
</script>
<style>
</style>

为什么要这么写呢，因为父组件A中的option是通过props传递给了B组件的option，此时A组件的option就已经绑定上B组件props中的option对象了，当A组件中更新了option的数据，那么B组件中option也会发生改变，因为监听到数据变化，此时B组件的图表DOM就会开始更新，使用 $nextTick 方法就是在DOM元素更新完毕之后再执行其中的方法，即图表重新渲染完毕之后再将option中的更新数据填充上去，此时图表的数据就发生了更新，而之前没有使用$nextTick，在图表DOM还没有更新完毕(即图表还没有渲染出来)，就将option设置给图表，当图表渲染出来，图表中的option还是之前的option，所以才没有发生改变。

最后编辑于：2022.07.22 17:24:17