按钮组切换控制统计图显示【统计图切换渲染失败】

背景

需要实现点击左上角按钮组的按钮，切换对应的统计图

1. 点击按钮1呈现的统计图。映射的实体类Vo1
   
2. 点击按钮2呈现的统计图。映射的实体类Vo2
   
   可能会出现的问题：
   （1） 空白：进入页面只渲染第一个统计图，点击按钮后，第二个统计图不显示，div为空白。
   （2） 数据错乱：第一个统计图的4个series的data会乱入到第二个统计图的3个data，使其也在页面上显示4个data。

正常显示的实现方式

前端

template模块的按钮上增加点击事件；统计图模块增加v-show控制div显隐。

<el-row :gutter="10" class="mb8">
  <div style="margin-left: 65px; margin-top: 15px">
    <el-button-group>			<!--注意点击事件-->
      <el-button type="primary" size="small" plain @click="showChart('1')">按钮1</el-button>
      <el-button type="primary" size="small" plain @click="showChart('2')">按钮2</el-button>
    </el-button-group>
  </div>
</el-row>
<el-row>
     <el-col align="center">
       <!--        统计图-->
       <div id="chart_1" v-show="showAvg" class="chart"></div>
       <div id="chart_2" v-show="!showAvg" class="chart" ></div>
     </el-col>
 </el-row>

data() {
    return {
      //按钮参数
      chartType: '1',
      //统计图1的数据
      singleCostValue: [],
      //统计图2的数据
      singleTotalValue: [],
      // v-show 判断是否显示div
      showAvg: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateCost: null,	//年份查询参数
      },
      }
 }
 mounted() {
    this.$nextTick(()=>{
      this.showChart('按钮1');
    });
  },
methods() {
/** 按钮点击切换图表 */
    showChart(type) {
      this.chartType = type;
      if (this.chartType === '1' || type === null){
        this.showAvg = true;
        this.initChart_1();		//初始化统计图1
      }else {
        this.showAvg = !this.showAvg;
        this.initChart_2();		//初始化统计图2
      }
    },
    initChart_1(){
    //根据参数查询，把后端数据传递到统计图方法myEChart_1
      singleCostChart(this.queryParams).then(response => {
        this.myEChart_1(response.data);
      })
    },
    initChart_2(){
      singleIncomeChart(this.queryParams).then(response => {
        this.myEChart_2(response.data);
      })
    },
    myEChart_2(datm) {
      var dataMonth = [];
      var dataCost = [];
      var dataOut = [];
      var dataRatio = [];
      for ( let i = 0; i<datm.length; i++ ){
        var item1 = {
         // value: formattedDate,
          value: datm[i].dateCost.toString().substring(0,7),
        };//写入横坐标x轴年月
        dataMonth.push(item1);
        var item2 = {
          value: datm[i].totalCost,
        };//写入统计图第一个数据列表，即第一个柱
        dataCost.push(item2);
        var item3 = {
          value: datm[i].totalOutput,
        };//写入第二个数据列表
        dataOut.push(item3);
        var item4 = {
          value: datm[i].profitRatio,
        };//写入第三个数据列表
        dataRatio.push(item4);
      }
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['bar1', 'bar2', 'line3'],
          y: 'bottom'
        },
        xAxis: [
          {
            type: 'category',
            data: dataMonth,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}万元'
            }
          },
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: 'bar_1',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value + '万元';
              }
            },
            data: dataCost
          },
          {......}//省略
        ]
      };
      var myChart_1 = echarts.init(document.getElementById("chart_2"));
      myChart_1.setOption(option);
      window.addEventListener("resize", () => {
        myChart_1.resize();
      });
    },

附注

上示统计图中，联合右上角日期框选择器，查询数据显示对应的统计图

添加事件变化监听@change事件

<el-date-picker clearable
      v-model="queryParams.dateCost"
      type="year"
      style="border-radius: 4px; border: #00afff solid 1px;
              margin-left: 400px; width: 270px"
      value-format="yyyy-MM-dd HH:mm:ss"
      @change="handleYearChange"
      placeholder="请选择年份">
</el-date-picker>

/** 年份选择 */
    handleYearChange(value) {
    //  console.log('选择的年份是：', value);
      this.showChart('1');
    },