在vue中引用了Echarts 导致Cannot read property getAttribute of null

报错信息:


image.png

报错原因:
由于把echarts放到页面的一个弹出框组件中,故在页面初始化的过程中,我的charts这时候不在页面节点中,使用beforeUpdate钩子可以发现,在关闭弹出框之后,再打开就可以出现表格,所以只需简单的添加this.$nextTick(function(){})函数,将表格初始化放到这个函数中就能解决问题

beforeUpdate () {
    this.$nextTick(function () {
      var myChart = echart.init(this.$refs.chart3)
      myChart.setOption({
        xAxis: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月']
        },
        legend: {
          data: ['过期未处理店铺数量', '超期未新建任务数量']
        },
        series: [{
          name: '过期未处理店铺数量',
          type: 'bar',
          itemStyle: {
            normal: {color: '#efac53'}
          },
          stack: '总量',
          label: {
            normal: {show: true, position: 'insideRight'}
          },
          barWidth: 20,
          data: [15, 0, 47, 35]
        }, {
          name: '超期未新建任务数量',
          type: 'bar',
          barWidth: 20,
          z: 10,
          stack: '总量',
          itemStyle: {
            normal: {
              color: '#55c3dc'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            }
          },
          data: [{value: 45, name: '', url: 'navPage1', id: 0},
            {value: 60, name: '', url: 'navPage1', id: 1},
            {value: 13, name: '', url: 'navPage1', id: 2},
            {value: 25, name: '', url: 'navPage1', id: 3}]
        }]
      })
      var that = this
      myChart.on('click', function (e) {
        that.$router.push({path: e.data.url, query: {id: e.data.id}})
      })
    })

你可能感兴趣的:(在vue中引用了Echarts 导致Cannot read property getAttribute of null)