vue3+element-ui项目中使用echart无法渲染表格

合集 - 前端小bug(5)

1.点击“编辑”后取消，再点击“新增”模态框中出现“编辑”的内容2024-08-292.VUE样式穿刺2024-08-303.报错TypeError: Cannot read properties of undefined (reading 'filter')2024-08-30

4.vue3+element-ui项目中使用echart无法渲染表格2024-08-28

5.vue3中使用pinia报错2024-09-03

收起

问题描述：vue3+element-ui项目中使用echart无法渲染表格，f12报错“TypeError: this.dom.getContext is not a function”

原代码：

<div class="graph">
        <el-card ref="userEchart" style="height: 220px"> </el-card>
</div>

上网搜索，发现是echarts.js要在原生标签上引用ref，而el-card并非原生标签而是element-ui中的标签

修改后代码：

<div class="graph">
  <el-card >
     <div ref="userEchart" style="height: 220px">
     </div>
  </el-card>
</div>

结果：图表渲染成功。