echarts bar chart pie chart switching

Code:

<template>
  <div class="wrap">
    <div  v-for="(item,index) in cuurentData" :key="index">
      <div class="chartsBar" :id="`chartsBar${index}`" :style="{ width: '315px', height: '270px' }" :v-show="show['barShow'+index]"></div>
      <div class="chartsPie" :id="`chartsPie${index}`" :style="{ width: '315px', height: '270px' }" :v-show="show['pieShow'+index]"></div>
    </div>
  </div>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {
      show:{},
      cuurentData:[],
      pieShow:{}
    };
  },
  watch:{
    chartData:{
      handler(newValue){
        this.cuurentData = newValue;
        if(this.cuurentData.length>0){
          for (let i = 0; i < this.cuurentData.length; i++) {
            this.$set(this.show,'barShow'+i,false);
            this.$set(this.show,'pieShow'+i,false);
          }
          this.$nextTick(()=>{
            this.initChart()
          })
        }
      },

      deep:true
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 折线、柱状
    initChart(){
      let that = this;
      let optionBar;
      let optionPie;
      let chartBar;
      let chartPie;
      let colors =['rgba(166, 83, 90, 1)','rgba(254, 215, 26, 1)','rgba(239, 130, 160, 1)','rgba(183, 63, 160, 1)',
        'rgba(92, 30, 25, 1)','rgba(131, 167, 141, 1)','rgba(128, 118, 163, 1)','rgba(36, 116, 181, 1)',
        'rgba(142, 139, 88, 1)','rgba(186, 207, 101, 1)', 'rgba(238, 44, 37, 1)','rgba(59, 129, 140, 1)',
        'rgba(19, 72, 87, 1)','rgba(153, 164, 157, 1)','rgba(55, 182, 65, 1)','rgba(224, 147, 0, 1)',
        'rgba(24, 45, 180, 1)','rgba(125, 190, 255, 1)','rgba(100, 88, 34, 1)','rgba(239, 111, 72, 1)',
        'rgba(86, 88, 91, 1)','rgba(156, 21, 8, 1)','rgba(51, 91, 63, 1)','rgba(85,239,229,1)',
        'rgba(99,243,136,1)'];
      for (let i = 0; i < this.cuurentData.length; i++) {
        let barSeries = []
        for (let j = 0; j < this.cuurentData[i].data.yaxisData.length; j++) { // 柱状图系列数据处理
          barSeries.push({
            type: 'bar',
            name: this.cuurentData[i].data.yaxisData[j].name,
            data: this.cuurentData[i].data.yaxisData[j].data,
            itemStyle: {
              normal: {
                color: function (d) {
                  // return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                  return colors[Math.floor(Math.random() * 26)]
                }
              }
            }
          })
        }

        if(this.cuurentData[i].data.pieData){ // 是否显示饼图按钮
          this.$set(this.pieShow, 'myPieShow' + i, true )
        }else {
          this.$set(this.pieShow, 'myPieShow' + i, false )
        }
        chartBar = this.$echarts.init(document.getElementById(`chartsBar${i}`));
        chartPie = this.$echarts.init(document.getElementById(`chartsPie${i}`));
        // 初始让所有的饼图隐藏位置
        document.getElementById('chartsPie'+i).style.display = 'none';
        // 柱状图配置
        optionBar = {
          title: {
            text: this.cuurentData[i].title,
            subtext:this.cuurentData[i].subTitle,
            textStyle:{
              fontSize:16,
              lineHeight:10,
            },
            subtextStyle:{
              fontSize:14,
              color:'#545454',
              fontWeight:'bold',
            },
            top:5
          },
          tooltip: {
            trigger: 'axis',
            position: ['10%', '50%'],
          },
          grid:{
            left:37,
            bottom:'21%',
            top:'22%'
          },
          toolbox: {
            show: true,
            itemSize:18,
            showTitle:true,
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              myPie: {
                show: this.pieShow['myPieShow'+i], // 切换饼图的按钮是否显示
                title: '切换为饼状图',
                icon: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m460.1856 489.8816H537.6V52.0192a461.2096 461.2096 0 0 1 434.5856 437.8624z m0 51.2a458.752 458.752 0 0 1-93.3888 249.4464L582.0416 541.0816zM512 972.8a460.8 460.8 0 0 1-25.6-921.6v464.2816a25.8048 25.8048 0 0 0 9.8304 20.48L845.6192 829.44a459.776 459.776 0 0 1-333.6192 143.36z',
                onclick: ()=> {
                  chartPie.setOption(optionPie);
                  this.$nextTick(()=>{
                    document.getElementById('chartsBar'+i).style.display = 'none';
                    document.getElementById('chartsPie'+i).style.display = 'block';
                  })
                }
              },
              restore: { show: true },
            },
            position:[20,20]
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: this.cuurentData[i].data.xaxisData,
              axisLabel: {
                interval:0,
                formatter:function(value) {
                  return value.split("").join("\n");
                }
              }
            }
          ],
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#444343',
              formatter: function (value, index) {
                // value大于10000时除以10000并拼接w，小于1000按原格式显示
                if (value >= 10000) {
                  value = value / 10000 + 'w';
                } else if (value < 10000) {
                  value;
                }
                return value;
              },
            },
          },
          series: barSeries,
        };

        // 饼状图配置
        optionPie = {
          title: {
            text: this.cuurentData[i].title,
            subtext:this.cuurentData[i].subTitle,
            textStyle:{
              fontSize:16,
              lineHeight:10,
            },
            subtextStyle:{
              fontSize:14,
              color:'#545454',
              fontWeight:'bold',
            },
            top:5
          },
          tooltip: {
            position: ['10%', '50%'],
            formatter: '{a}: <br/>{b} : {c} ({d}%)',
          },
          toolbox: {
            show: true,
            itemSize:18,
            showTitle:true,
            feature: {
              myBar: {
                show: true,
                title: '切换为柱状图',
                icon: 'image://data:image/png;base64,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',
                onclick: () => {
                  chartBar.setOption(optionBar);
                  this.$nextTick(() => {
                    document.getElementById('chartsBar' + i).style.display = 'block';
                    document.getElementById('chartsPie' + i).style.display = 'none';
                  })
                }
              },
              myPie: {
                show: true,
                title: '切换为饼状图',
                icon: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m460.1856 489.8816H537.6V52.0192a461.2096 461.2096 0 0 1 434.5856 437.8624z m0 51.2a458.752 458.752 0 0 1-93.3888 249.4464L582.0416 541.0816zM512 972.8a460.8 460.8 0 0 1-25.6-921.6v464.2816a25.8048 25.8048 0 0 0 9.8304 20.48L845.6192 829.44a459.776 459.776 0 0 1-333.6192 143.36z',
                onclick: function () {
                }
              },
              restore: {show: true},
            }
          },
          calculable: true,
          series:
            [
            {
              name: "人口数",
              type: 'pie',
              radius: '50%',
              top:40,
              data: this.cuurentData[i].data.pieData,
              itemStyle: {
                normal: {
                  color: function(d){
                    // return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                    return colors[Math.floor(Math.random()*26)]
                  }
                }
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        chartBar.setOption(optionBar);
        chartPie.setOption(optionPie);
      }
    },
  }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.wrap,
.chartsBar,
.chartsPie{
  width: 100%;
  height: 260px;
}
</style>

Rendering: