【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题

前言:对于后端的小伙伴来说，现在用vue-element-admin 真的太香了，毕竟Java向的程序员，光后端技术栈就得学到头皮发麻啊，所以，感谢尤雨溪，感谢饿了么，感谢花裤衩。

最近在帮朋友写东西的时候，用到了饼图，可是数据明明已经加载到了，并且格式是对的，但是为啥就没法渲染呢？

出现类似的问题，我们的思路往往是如下排除:

1.代码本身是否有问题。

2.数据格式对吗。

3.代码加载顺序。

所以，这就要求我们对前端，或者直接说js弱类型(当然es6和ts是比较严格了)比较适应，同时对Vue基础比较扎实，然后就是对Vue生命周期钩子熟悉了。

遇到了这个问题，一则可以使用watch，监听数据变化。

 watch: {
    echarts_option: {
      handle(newVal,oldVal) {
        if(this.chart){
          if(newVal){
            this.chart.setOption(newVal);
          }else{
            this.chart.setOption(oldVal);
          }
        }
      }
    }
  }

这里的this.chart是放在data里边的，你的chart的实例

第二个是，直接将重新绘制的函数，写在后端请求的then里边

getData() {
       summaryAPI.getTerminalList().then(data => {
        console.log(data.data);
        let dataArray = [];
        dataArray = data.data;
        console.log(dataArray);
        for(let i = 0;i<dataArray.length;i++){
          this.legendData.push(dataArray[i].type);
          let singleData = {value: dataArray[i].count,name: dataArray[i].type}
          this.seriesData.push(singleData);
        }
        console.log('data->'+this.legendData+'-'+this.seriesData)
         this.$nextTick(() => {
          this.initChart()
        })
      }).catch();
    }