在Vue的mounted中仍然加载渲染不出echarts的方法问题
作者：没有头发的战斗暴龙兽
这篇文章主要介绍了在Vue的mounted中仍然加载渲染不出echarts的方法问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
问题的主要原因是在mounted中无法获取到dom元素
<template>
<div>
<div ref="echarts"></div>
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$$refs.echarts); // undefined
},
}
</script>知道了问题在哪里，那就从根源下手：
这是因为某些因素使得在mounted中还并没有生成dom，所以结果自然就是undefined，那怎样才能获取到这个dom元素？
解决方法1（完美解决+超简单）
直接把初始化方法写在updated生命周期中
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
updated() {
this.initEcharts();
}解决方法2（完美解决+复杂）
使用自定义指令
我们自己设置一个自定义属性，去监测dom是什么时候生成的，在dom生成的时候立刻将echarts渲染到页面上。
这个方法完美解决了加定时器有延时的缺点。
<template>
<div>
<div ref="echarts" v-init="option"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
option: {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
}
},
directives: {
init: {
// inserted: 在dom元素成功插入父节点时的钩子函数
inserted(el, binding) {
echarts.init(el).setOption(binding.value);
}
}
},
}
</script>解决方法3（有缺陷+超简单）
在初始化方法外面套一层定时器
在初始化方法外面套一层定时器：等dom生成了之后我们再去获取这个dom元素
methods: {
initEcharts() {
echarts.init(this.$refs.echarts).setOption(option);
}
},
mounted () {
setTimeout(() => {
this.initEcharts();
}, 500)
},这个方法有一个很大的缺点，就是我们要自己去设置定时器的时间，就有可能会造成页面的渲染和echarts的渲染不同步，页面显示出来了之后echarts可能要过一会儿才会出现。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。