症状

vue项目 echarts中出现“There is a chart instance already initialized on the dom.”的警告
Vue页面多次渲染echarts封装的组件但只出现一个(如果这个为主要症状)

原因:

有可能是id冲突,如果你注册了N个组件,但是由于是复制粘贴过来的,导致你所有的组件文件echarts容器的id都是相同的,所以导致只渲染第一个echarts组件
this.$refs未获取到dom元素


<div id="myChart" ref="myChart" style="width: 100%; height: 100%" />
// const myChart = echarts.init(document.getElementById('myChart'))
const myChart = echarts.init(this.$refs.myChart)

::: tip 这块尽量用 const myChart = echarts.init(this.$refs.myChart) 这种方式来初始化图表,解决id重复问题导致的只渲染第一个echarts图表组件 ::: 如果this.$refs.myChart没有获取到dom元素有可能是加载上出了问题,因为created生命周期里和watch监听里是获取不到this.$refs这种方式的dom元素的,可以用$nextTick来获取


this.$nextTick(()=>{
  this.$refs.bar.myChart(data)
})

易、小枫

以后不见面的日子要按年算了，希望你不留遗憾地度过。

发布数

关注者

3982

累计阅读

在Vue项目里遇到多次渲染echart组件只显示一个的问题 3年前

症状

原因:

有可能是id冲突,如果你注册了N个组件,但是由于是复制粘贴过来的,导致你所有的组件文件echarts容器的id都是相同的,所以导致只渲染第一个echarts组件

this.$refs未获取到dom元素

热门教程文档