使用echarts常用问题总结

1，echarts配合element ui的抽屉插件出现报错，上次解决方法是使用element ui 抽屉的open事件，让在打开事件重新加载，我们项目的需求是点击某个数据，要传递这条数据包含的其他值，让其显示；当时和后台对完数据发现会有报错，后来解决办法是在数据赋值结束，让他重新加载echarts

//和后台数据对接
method:{
echartsData(row){
  this.$nextTick(() => {
     this.$http
          .get(`/bus/asset-flaw/chart/${row.assetId}?listType=${this.listType}`)
          .then(res => {
            this.tabData2= res.data.content.assetStatistics
//折线图的数据
     this.lineData(row)
    //重新加载echarts
            this.line()
//窗口自适应
            this.inits()
          })
          .catch(error => {
            console.log(error.message)
          })
    }）
},
  line() {
      this.$echarts.init(this.$refs.main).setOption(this.option3)
    },
 inits() {
      let self = this //因为箭头函数会改变this指向，指向windows。所以先把this保存
      window.onresize = function() {
        self.$echarts.init(self.$refs.main).resize()
      }
    },
//给折线图赋值
    lineData(row) {
      this.option3.title.text = this.textContent + '趋势图' + '-' + row.startUrl
      let asset = this.tabData2.map(x => x.needAttentionCount)
      let findNewCount = this.tabData2.map(x => x.findNewCount)
      let findRecurringCount = this.tabData2.map(x => x.findRecurringCount)
      let findOpenCount = this.tabData2.map(x => x.findOpenCount)
      this.option3.series[0].data = asset
      this.option3.series[0].name = 'A'
      this.option3.series[1].data = findNewCount
      this.option3.series[1].name = 'B'
      this.option3.series[2].data = findRecurringCount
      this.option3.series[2].name = 'C'
      this.option3.series[3].data = findOpenCount
      this.option3.series[3].name = 'D'
      let historyTime = this.tabData2.map(x => x.historyTime)
      // 时间
      this.option3.xAxis.data = historyTime
      this.option3.legend.data = ['A','B','C','D']
    },
}   

2、让饼图中的百分比为0的不显示

  // 隐藏百分比为0的
    lineHide(opt) {
      opt.data.forEach(item => {
        if (item.value === 0) {
          item.value = null
        }
      })
    },