症状
- 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)
})
