转载博客https://blog.csdn.net/axIsMyName/article/details/100738065 在vue中使用echarts div中使用v-if的问题 （不能显示 报错"TypeError: Cannot read property ‘getAttribute’ of null"）
1.使用echarts 添加v-if 会出现 渲染不出来 以及报错的 问题 使用v-show的时候图标会渲染出来但是 也会出现长框不一的 现象 2.v-if是让盒子消失 并不是改变盒子的display 属性 所以 当时你显示 v-if的时候 他会重新插入盒子 但是echarts表格并不会刷新 因为在vue中mounted hook 已经调用一遍echarts表格的方法了 3.解决方案 使用vue中的this.$nextTick(() => { this.myEcharts() }) 在你让v-if 等于 true的时候 调用这里面的函数 echarts 就可以重新加载了 问题就解决了
此处是一个按钮
<el-button @click="viewPic(data)" type="text" size="small">查看
</el-button>
这里是预处理 使用this.$nextTick
viewPic(data
) {
this.showWay
= 0;
console
.log(data
);
this.$
nextTick(() => {
this.drawPic(data
)
})
},
这里是正经的画图
drawPic(_data
) {
console
.log(_data
);
let myChart
= this.$echarts
.init(document
.getElementById('myChart'));
let showData
= [];
let xAxisData
= []
for (let key in _data
) {
xAxisData
.unshift(key
);
showData
.unshift(_data
[key
]);
}
myChart
.setOption({
tooltip
: {},
xAxis
: {
data
: xAxisData
,
type
: 'category',
},
yAxis
: {},
series
: [{
name
: _data
.type
,
type
: 'bar',
data
: showData
}]
});
},
