Vue 中EChart 图表数据更新中Watch 不起作用

Question

我正在使用 EChart 和 Vue 2，我做了一个简单的 EChart 组件。

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    },
    autoResize: {
        type: Boolean,
        default: true,
      },        
  },
  watch: {

    chartData: {
         deep: true,
         handler(val) {
          console.log('chartdata handler',val);

          this.setOptions(val.legend, val.data);
         }
    },
    width: {
         deep: true,
         handler(val) {
          console.log(' width',val);
        }
    }
  },  
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
    
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(
         ['pepper','rice'],
         [
              { value: 0, name: 'pepper' },
              { value: 0, name: 'rice' },
        ]
      );
    },

    setOptions( lengend, data ) {    
      this.chart.setOption({
          title: {
              left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            data: lengend,
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              itemStyle: {
                borderRadius: [20, 5, 5, 10],
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false
              },
              data: data
            }
          ]
        });
    }
  }
}
</script>

我在另一个父母身上使用这个组件。

   <PieChart ref="pieChart" :chartData="pieData" :width="'400px'"> </PieChart>

  data () {
    return {
        pieData: {
            name: 'crop distribution',
            data:[
                { value: 115, name: 'pepper' },
                { value: 128, name: 'rice' }
            ],
            legend:['pepper','rice']
        },
     }

但是这段代码永远不会将

chartData

传递给

PieChart

来更新图表。我调查了一下发现：

watch: {
    chartData: { deep: true,
         handler(val) {
          console.log('chartdata handler',val);
          this.setOptions(val.legend, val.data);
         }
    },
}

这个watch功能没有触发，还没有console输出。手表在其他Vue应用中运行良好，但是在与EChart集成时，这里没有工作。

Answer 1

很确定你只是错过了观察者

immediate: true

：

  watch: {
    chartData: {
      handler(val) {
        console.log('chartdata handler',val);
        this.setOptions(val.legend, val.data);
      }
      deep: true,
      immediate: true,  // <--------------
    },
  }

没有它，观察者不会在初始化期间被触发，只有在数据发生变化时才会被触发。因此，如果您从不更改数据（而且看起来不像您这样做），那么您的观察者就不会运行。

添加属性将其更改为热切的观察者，它在第一次设置数据时运行。 （关于 v2 的文档很差，但它在 v3 中工作相同。）

有用吗？