【echarts初始化方法报错】[Vue warn]: Error in nextTick: “TypeError: this.dom.getContext is not a function“_error in nexttick: "typeerror: this.dom.getcontext-CSDN博客

本文链接：https://blog.csdn.net/qq_45630675/article/details/126504679

错误信息：
[Vue warn]: Error in nextTick: “TypeError: this.dom.getContext is not a function”
在这里插入图片描述 代码：
echarts初始化方法中使用getElementsByClassName方法获取渲染dom元素报错

          <el-col
            :span="8"
            class="content-middle"
          ><div class="title">事故责任分析</div>
            <div class="display-wrapper5" />
          </el-col>

    echartsInit() {
      var chartDom = document.getElementsByClassName('display-wrapper5')
      console.log(chartDom)
      var myChart = chartDom && echarts.init(chartDom)
      var option

      option = {
       ...
      }
      option && myChart.setOption(option)
    },

修改后：
只能使用getElementById方式获取（注意需要给渲染的容器设置宽高）

          <el-col
            :span="8"
            class="content-middle"
          ><div class="title">事故责任分析</div>
            <div id="display-wrapper5" ref="DisplayWrapper5" />
          </el-col>

    echartsInit() {
      var chartDom = document.getElementById('display-wrapper5')
      console.log(chartDom)
      var myChart = chartDom && echarts.init(chartDom)
      var option

      option = {
       ...
      }
      option && myChart.setOption(option)
    },