Echarts之数据动态绑定及表格实时渲染问题

先上代码：当然是使用watch啦，watch大法 好啊，为了数据变化时实时刷新表格，在监听到属性值发生改变时，重新渲染一次表格。

敲重点：echarts不会自动帮你渲染数据的，需要手动再次调用setOption函数。

再次敲重点，重点，重点：看到 this.myEcharts.setOption(this.option, true)这一行代码了吗？

最后这个属性'true'真是nb坏了，没它不行。

上官方代码：setOption的函数定义，option是指图表的配置项和数据，notMerge是指是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新option 创建所有新组件。

也就是说如果不设置noeMerge就会自动合并数据，离谱！千万要设置，千万要设置，千万要设置。

 <div id="main" style="min-width: 600px; min-height: 300px"></div>

// 饼状图
const option = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    type: 'scroll', // 设置图例分页类型为滚动
    orient: 'horizontal', // 垂直排列
    bottom: 10,
    itemWidth: 18,
    itemHeight: 5,
    itemGap: 30, // 图标间距
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      center: ['40%', '40%'],
      label: {
        show: false,
        position: 'center',
      },
      labelLine: {
        show: false,
      },
      data: [{ name: '', value: 0 }],
    },
  ],
});

const echarts = () => {
  myChart = echarts.init(document.getElementById('main') as HTMLElement);
  myChart.setOption(option, true);
};