今天做项目,用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: [5, 20, 36, 10, 10, 20] } ] }); } }, 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,还是加载了