欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TypeError:cannot read property ‘getAttribute‘ of undefined

程序员文章站 2022-06-07 13:18:10
...

报错场景:页面切换路由时报错
报错原因:使用 Vue + echarts,因为 页面中使用了 echarts 图表,在初始化图表后,dom 元素还未被初始化加载出来,导致 echarts 在渲染时候报错
示例代码:

drawPie(){ // 总体告警数 饼图
  // 基于准备好的dom,初始化echarts实例
  let ref = this.$refs.pie
  if (ref && ref !== undefined) {
    let myChart = this.$echarts.init(ref)
    // 绘制图表
    myChart.setOption({
      color: ['#04befe'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '65%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            formatter: ' {c}\n\n{b}',
            fontSize: '16',
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: this.total_num, name: '总体告警数'},
          ],
          hoverOffset: 2
        }
      ]
    })
  }
},

函数中直接调用 echarts 方法即可

相关标签: vue vue echarts