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

本文链接：https://blog.youkuaiyun.com/youtiankeng/article/details/108913532

在Vue应用中使用ECharts时遇到v-if导致图表无法正常显示的问题，主要原因是v-if不会改变元素的display属性，而是直接移除DOM。这使得ECharts实例无法正确更新。解决方法是在v-if切换后利用Vue的$nextTick方法，在DOM更新后再初始化或重绘ECharts图表。具体做法是在按钮点击事件中调用$nextTick，然后在回调中执行图表绘制函数，确保ECharts能够正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载博客https://blog.youkuaiyun.com/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
                    }]
                });
            },