在vue中使用echarts 使用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 就可以重新加载了 问题就解决了

代码如下

 myEcharts() {
                let myTable = echarts.init(document.querySelector("#myFristEcharts"))
                myTable.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['20', '21', '22', '23', '24', '25', '26', '27'],
                        data: [{
                                value: '20',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '21',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '22',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '23',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '24',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '25',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            },
                            {
                                value: '26',
                                textStyle: {
                                    // fontSize: 24,
                                }
                            }
                        ],
                        splitLine: { //X轴网格
                            show: true,
                            lineStyle: {
                                color: '#f3f3f3',
                                type: 'solid',
                                width: '.5',
                            },

                        },
                        axisTick: { //卡尺
                            show: false
                        },
                        axisLine: { //x轴线
                            show: true,
                            lineStyle: {
                                color: '#fe6434',
                                width: '.5'
                            }
                        },
                        axisLabel: { //x轴文字的配置
                            show: true,
                            textStyle: {
                                color: "#666",
                                fontSize: 14
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: { //X轴网格
                            show: true,
                            lineStyle: {
                                color: '#f3f3f3',
                                type: 'solid',
                                width: '.5'
                            },
                            interval: 1,
                            // color: '#fe6434',
                        },
                        axisTick: { //卡尺
                            show: false
                        },
                        axisLine: { //y轴线
                            show: false,
                            lineStyle: {
                                color: '#f3f3f3',
                                width: '.5'
                            }
                        },
                        axisLabel: { //y轴文字的配置
                            show: true,
                            textStyle: {
                                color: "#666",
                                fontSize: 14,
                            },
                            showMaxLabel: false, //是否显示最大的刻度数值
                        },
                        splitNumber: 3, //坐标轴的分割段数
                        //最小值
                        // min:
                        data: {
                            textStyle: {
                                fontSize: 24,
                            }
                        }
                    },
                    series: [{ //数据
                        data: this.massage,
                        type: 'line',
                        areaStyle: { //阴影样式
                            color: "rgba(255, 247, 245,.6)"
                        },
                        smooth: true, //曲线平滑
                        symbol: "circle",
                        symbolSize: 10.5, //拐点大小
                        itemStyle: {
                            color: '#fe6434',
                            borderColor: '#fff'
                        },
                        lineStyle: {
                            normal: {
                                color: "#fe6434", // 线条颜色,
                                width: 2.3
                            }
                        },
                    }],
                    grid: {
                        top: '5%',
                        left: '3.7%',
                        // bottom: '5%',
                        right: '5%',
                        containLabel: true
                    },
                })
            }//这是echarts 表格函数 可以忽略

		kLine1() {
                this.flag = true
                this.$nextTick(() => {
                    this.myEcharts()
                })
            }	//这里是重点 当现实div的时候 使用这个回调函数 即可
            

注意：当你页面一开始点击页面不需要展示表格的时候 不要在mounted里面调用echarts表格的方法 不然也会报错