在vue中使用echarts div中使用v-if的问题 （不能显示 报错“TypeError: Cannot read property ‘getAttribute‘ of null“）

转载博客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);
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                // console.log(_data['type']);
                let showData = [];
                let xAxisData = []
                for (let key in _data) {
                    // console.log(_data[key]);
                    xAxisData.unshift(key);
                    showData.unshift(_data[key]);
                }
                // 绘制图表
                myChart.setOption({
                    // title: {text: _data.type},
                    tooltip: {},
                    xAxis: {
                        data: xAxisData,
                        type: 'category',
                    },
                    yAxis: {},
                    series: [{
                        name: _data.type,
                        type: 'bar',
                        data: showData
                    }]
                });
            },