利用Vue和Echarts实现双层tab嵌套的 柱状图

从接到任务到动手实践，它一直是一个随随便便给我绕懵的存在。谨以此博，记录结果，避免之后再走弯路。若有更好的方法，欢迎交流。
先看实现结果：

由于4个图布局一模一样，只有数据源不一样，所以我选择在父组件，引入子组件4次，并在父组件获取数据传给子组件，此操作忽略。
下面为子组件的代码：

    <div class="targetcon " v-for="(item, index1) in this.datas" :key="index1">
      <div class="topictitle">
        <span class="iconfont2" v-if="idx == 0">&#xe685;</span>
        <span class="iconfont2" v-if="idx == 1">&#xe77c;</span>
        <span class="iconfont2" v-if="idx == 2">&#xe8ae;</span>
        <span class="iconfont2" v-if="idx == 3">&#xe618;</span>
        {{ item.rootName }} <!--大标题 -->
      </div>
      <ul class="targettab clear">
        <li
          v-for="(item1, index2) in item.result"
          :key="index2"
          :class="{ active: curridx1 == index2 }" <!--tab高亮-->
          @click.stop="tabClick1(item1.categoryName + idx, index2)"   
        > 
          <a>{{ item1.categoryName }}</a>
          <ol class="clear">
            <li
              v-for="(item2, index3) in item1.list"
              :key="index3"
              @click.stop="tabClick2(item2.indexName + idx, index2, index3, item2.indexName)"
              :class="{ active: curridx2 == index3 }"
              class="row-overflow"
              :title="item2.indexName"
            >
              {{ item2.indexName }}
            </li>
          </ol>
        </li>
      </ul>
    </div>

三个方法:

 //tab切换(外层)
    tabClick1(e, tabidx) {
      this.echartsYears = [];
      this.detailData = [];
      this.detailData = JSON.parse(
        window.sessionStorage.getItem(e + tabidx + 0)
      );
      //点击一级tab，二级tab默认获取第一个tab的标题，来源
      this.tempOption.title.text = "各国" + this.datas[0].result[Number(tabidx)].list[0].indexName;
      this.tempOption.title.subtext = "來源：" + this.detailData[0].source
      this.echartsYears = sessionStorage
        .getItem("years" + this.idx + tabidx + 0)
        .split(",")
        .reverse();
      // this.echartsYears = sessionStorage.getItem('years'+idx);
      this.curridx1 = tabidx;
      this.curridx2 = 0;
      this.initEchart(null, null, 1);
    },
   
     //tab切换(里面的)
    tabClick2(e, tabidx, tabidx1, name) {
      this.echartsYears = [];
      this.detailData = [];
      this.curridx2 = tabidx1;
      this.curridx1 = tabidx;
      this.detailData = JSON.parse(
        window.sessionStorage.getItem(e + tabidx + tabidx1)
      );
      //点击二级tab获取对应名称和来源
      this.tempOption.title.text = "各国" + name
      this.tempOption.title.subtext = "來源：" + this.detailData[0].source
      this.echartsYears = sessionStorage
        .getItem("years" + this.idx + tabidx + tabidx1)
        .split(",")
        .reverse();
      this.initEchart(null, null, 2);
    },
     // 初始化柱状图1
    initEchart(datas, idx, tabidx) {
      console.log(datas)
      if (datas && tabidx == undefined) {
        this.echartsYears = datas[0].years.split(",").reverse();
        this.tempOption.xAxis.data = this.echartsYears;
        this.detailData = datas[0].data;
        console.log(this.detailData)
        this.idx = idx;
        this.tempOption.title.text = "各国" + datas[0].indexName
        this.tempOption.title.subtext = "來源：" + datas[0].data[0].source
      }
      let that = this;
      let myChart = this.$echarts.init(this.$refs.targetbar);
      this.tempSeries = [];
      for (let i = 0; i < this.detailData.length; i++) {
        this.tempSeries.push({
          name: this.detailData[i].areaName,
          type: "bar",
          stack: "total",
          barWidth: 30, //柱状图宽度
          data: Object.entries(this.detailData[i]),
          itemStyle: {
            emphasis: {
              // 鼠标移入后的样式
              focus: "series",
            },
          },
        });
      }
      this.tempOption.series = this.tempSeries;
      this.tempOption.xAxis.data = this.echartsYears;
      let legend1 = {
        // data: this.tempOption.series.name,
        left: "center",
        bottom: "10px",
        show: true,
      };
      this.tempOption.legend = legend1;
      myChart.setOption(this.tempOption, true);
   
    },

调用：

mounted() {
    this.$nextTick(() => {
      this.initEchart();
    });
  },

数据格式：