第一个问题:

代码如下

<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')
  },
Logo

前往低代码交流专区

更多推荐