今天做项目,用echarts展示数据 ,自己测试 先测试 了下。写的代码html:
<div ref="myChart" style="height:300px;width:100%"></div>
JS
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(this.$refs.myChart);
// 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [, , , , , ]
}
]
});
}
},
mounted() {
this.drawLine();
}
结果报"TypeError: Cannot read property 'getAttribute' of undefined"的错。。
百度了下,说是dom没有加载完的问题,要放在this.$nextTick改成
mounted() {
this.$nextTick(() => {
this.drawLine();
});
}
这样可以了。
后来测试 了下,用vif控制 隐藏与显示也是报这样的错。。vshow不会。
原理还是一样吧,vif是dom不加载 的。vshow只是把dom display:none,还是加载了