今天遇到一个这个问题
记录一下
运行vue出现的问题,后面网上搜了一下,
出现该错误的原因是Echarts
的图形容器还未生成就对其进行了初始化所造成的
说直接点就是加载顺序的问题,然后找到了一个解决办法,使用vue
的ref
和$refs
来解决
一般的写法,都是使用ID
去绑定,比如
// html
<div id="charts">
// xxxx
</div>
// js
drawCharts () {
let previewChart = this.$echarts.init(document.getElementById('charts'))
previewChart.setOption({
// xxx
})
}
这样子一般是没有问题的,但是如果遇到首次加载直接进入该页面,就会出现上面的报错了,所以把这个改造一下就好了
// html
<div id="charts" ref="charts">
// xxxx
</div>
// js
drawCharts () {
// let previewChart = this.$echarts.init(document.getElementById('charts'))
let bar_dev = this.$refs.charts
if (bar_dev) {
console.log('charts不为空')
let previewChart = this.$echarts.init(bar_dev)
previewChart.setOption({
// xxx
})
}
}
通过$refs
来做绑定就可以了