在vue中使用echarts 使用v-if的问题 （不能显示 以及报错"TypeError: Cannot read property 'getAttribute' of null"）
- 使用echarts 添加v-if 会出现 渲染不出来 以及报错的 问题 使用v-show的时候图标会渲染出来但是 也会出现长框不一的 现象
- v-if是让盒子消失 并不是改变盒子的display 属性 所以 当时你显示 v-if的时候 他会重新插入盒子 但是echarts表格并不会刷新 因为在vue中mounted hook 已经调用一遍echarts表格的方法了
- 解决方案 使用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的时候 使用这个回调函数 即可