在vue中使用echarts时使用v-if动态隐藏显示空白的问题
第一个问题:代码如下<el-button@click="tubiao">切换图表</el-button><div id="chart1" v-if="+abc === 1"></div><div id="chart2" v-if="+abc === 2"></div><div id=...
·
第一个问题:
代码如下
<el-button @click="tubiao">切换图表</el-button>
<div id="chart1" v-if="+abc === 1"></div>
<div id="chart2" v-if="+abc === 2"></div>
<div id="chart3" v-if="+abc === 3"></div>
abc: '1',
tubiao() {
if (!this.abc) {
this.abc = 1
} else if (+this.abc === 1) {
this.abc = 2
} else if (+this.abc === 2) {
this.abc = 3
} else {
this.abc = 1
}
}
此时点击按钮,div会进行切换,但是echarts不会去进行渲染这个盒子内的图表,所以页面是空白的。
解决办法:使用v-show就可以了
第二个问题:
代码如下:
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
mounted() {
this.pie('chart3')
this.bar('chart2')
this.line('chart1')
},
在mounted里这样写的话会出现#chart1被渲染的是柱状图。
解决办法:按顺序先渲染#chart1
mounted() {
this.line('chart1')
this.bar('chart2')
this.pie('chart3')
},
更多推荐
已为社区贡献6条内容
所有评论(0)