[JavaScript知识库]Vue3 + vant + Echarts Tab切换不展示第二个图标

// 要写@click事件，不能写@click-tab

<van-tabs v-model:active="active" type="card" @click="changeAmount">
        <van-tab title="违规金额" lazy-render="true">
          <div id="main3" v-if="isShowLeftDom"></div>
          <no-data v-if="!dataTop10.data || !dataTop10.data.length"></no-data>
          <div v-else class="table-easy-box">
            <div class="h-tbale-container illegal-box">
              <div class="h-tbale-content">
                <table class="Htable">
                  <tr class="lastWidth">
                    <th class="h-table-cell">
                      <span>XXX</span>
                    </th>
                    <th class="h-table-cell">
                      <span>YYY</span>
                    </th>
                  </tr>
                  <tbody>
                    <tr class>
                      <td class="h-table-cell">
                        <span>会员管理</span>
                      </td>
                      <td class="h-table-cell">5%</td>
                    </tr>
                    <tr class>
                      <td class="h-table-cell">
                        <span>人事文化建设</span>
                      </td>
                      <td class="h-table-cell">6%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="营业金额" lazy-render="true">
          <div id="main4" v-if="isShowRightDom"></div>
          <no-data v-if="!dataTop10.data || !dataTop10.data.length"></no-data>
          <div v-else class="table-easy-box">
            <div class="h-tbale-container illegal-box">
              <div class="h-tbale-content">
                <table class="Htable">
                  <tr class="lastWidth">
                    <th class="h-table-cell">
                      <span>XXX</span>
                    </th>
                    <th class="h-table-cell">
                      <span>YYY</span>
                    </th>
                  </tr>
                  <tbody>
                    <tr class>
                      <td class="h-table-cell">
                        <span>会员管理</span>
                      </td>
                      <td class="h-table-cell">5%</td>
                    </tr>
                    <tr class>
                      <td class="h-table-cell">
                        <span>人事文化建设</span>
                      </td>
                      <td class="h-table-cell">6%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>



// 第二个Tab图表要用nextTick刷新

const illegalRightFunction = () => {
  option3 = {
    backgroundColor: "#FFF",
    grid: {
      left: "0",
      right: "0",
      bottom: "10",
      top: "20",
      containLabel: true
    },
    xAxis: {
      show: true,
      data: ["2018", "2019", "2020"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#E0E0E0",
          width: 1
        }
      },
      axisTick: {
        show: false //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        interval: 0
      }
    },
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#999",
          fontSize: 10
        },

        splitLine: {
          show: true,
          lineStyle: {
            color: "#E0E0E0",
            width: 1
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#999",
            width: 1
          }
        }
      }
    ],
    dataZoom: [
      {
        type: "slider",
        show: true,
        xAxisIndex: [0],
        start: 1,
        end: 50,
        zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: 6, //组件高度
        right: 3, //右边的距离
        bottom: 0, //右边的距离
        brushSelect: false, //刷选功能
        fillerColor: "#E0E0E0", //选中范围的填充颜色
        borderColor: "#E0E0E0", //边框颜色
        backgroundColor: "#FFF", //两边未选中的滑动条区域的颜色
        borderRadius: 3,
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        filterMode: "filter"
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 1,
        end: 50,
        zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
      }
    ],
    series: [
      {
        name: "P2",
        type: "bar",
        barWidth: 16,
        barCategoryGap: 20,
        barMinHeight: 5,
        itemStyle: {
          color: "#F4DA6C"
        },
        label: {
          show: false,
          position: "top",
          color: "#333",
          fontSize: 10
        },
        data: [10, 6, 5]
      },
      {
        name: "P3",
        type: "bar",
        barWidth: 16,
        barCategoryGap: 20,
        barMinHeight: 5,
        itemStyle: {
          color: "#D66474"
        },
        label: {
          show: false,
          position: "top",
          color: "#333",
          fontSize: 10
        },
        data: [35, 20, 55]
      }
    ]
  };

  nextTick(() => {
    var chartRighrDom = document.getElementById("main4") as HTMLElement;
    var myChart = echarts.init(chartRighrDom);
    option3 && myChart.setOption(option3);
  })

}