vue3+ts 封装echarts，根据tabs切换展示

 <div class="bottom">
                        <div class="topli">
                            <p>用电统计</p>
                            <div class="tabs">
                                <div class="tab" :class="{ active: active.tab1 === index }"
                                    v-for="(item, index) in tabsList1" :key="index" @click="changeTab(1, index)">
                                    {
  { item.label }}
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div id="sum-electricity" v-if="!loading.tab1 && active.tab1 === 0">
                                <TestEleChart pid="sum-electricity" title="月用电统计" :eleData="eleData"
                                    :eleXdata="eleXdata"></TestEleChart>
                            </div>
                            <div id="day-electricity" v-if="!loading.tab1 && active.tab1 === 1">
                                <TestEleChart pid="day-electricity" title="日用电统计" :eleData="eleData"
                                    :eleXdata="eleXdata"></TestEleChart>
                            </div>
                        </div>
                    </div>

                    <div class="sitestutus">
                        <div class="top">
                            <p>用水统计</p>
                            <div class="tabs">
                                <div class="tab" :class="{ active: active.tab2 === index }"
                                    v-for="(item, index) in tabsList" :key="index" @click="changeTab(2, index)">
                                    {
  { item.label }}
                                </div>
                            </div>
                        </div>
                        <div class="sitebutom">
                            <div id="monthWate" v-if="!loading.tab2 && active.tab2 === 0">
                                <TestWaterChart pid="monthWate" title="月用水" :waterData="waterData"
                                    :waterXdata="waterXdata"></TestWaterChart>
                            </div>
                            <div id="dayWater" v-if="!loading.tab2 && active.tab2 === 1">
                                <TestWaterChart pid="dayWater" title="日用水" :waterData="waterData"
                                    :waterXdata="waterXdata"></TestWaterChart>
                            </div>

                        </div>
                    </div>

<script setup lang="ts">

// tabs切换

const tabsList = [

    { label: '日' },
    { label: '月' },
];

const tabsList1 = [

    { label: '日' },
    { label: '月' },
];

const active = ref({
    tab1: 0,
    tab2: 0,
});
const loading = ref({
    tab1: false,
    tab2: false,
});

const wat