vue echarts 动态添加 series 数据

何为动态添加 series 数据？由于 series 中的个数是动态的，通过接口返回的，我们需要对 series 做动态处理。

处理动态 series 的数据：

let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0]
  }, {"name": "外修","data": [0]}, {"name": "小修","data": [446]}, {"name": "一保","data": [161]
  }, {"name": "一保(外)","data": [0]}, {"name": "中修","data": [0]
}]
let newResult = []
if(result.length) {
  result.forEach(item => {
    newResult.push({
      type: "bar",
      z: 10,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 10,
          color:'#000'
        }
      },
      ...item
    })
  })
}

初始化chart：

chartInt(legend, xAxis, newResult) {
  let option = {
    ...
    legend: {
      data: legend,
    },
    ...
    series: newResult
  }
  this.$nextTick(() => {
    this.$refs.barChart.clear();
    this.$refs.barChart.mergeOptions(option);
  });
   
  // 或者
  this.$nextTick(() =>{
    //基于准备好的dom，初始化echarts实例
    echarts.dispose(document.getElementById("zhutu"));
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zhutu"));
    window.onresize = function () {
      myChart.resize();
    }
    myChart.setOption(option);
  })   
}

调用接口：

getDate() {
  this.showloading = true;
  this.nodata = false;
  let data = {    ...  };
  this.$axios({
    method: "post",
    url: "xxx",
    data: JSON.stringify(data)
  }).then(res => {
    this.showloading = false;
    // 省略处理数据
    this.chartInt(legend, data.dateArr, newResult)        
  });
},

渲染页面：

<v-chart ref="barChart" style="width:100%;height:8rem;"></v-chart>
// 或者
<div id="zhutu"></div>