vue中通過tabs 切換時顯示不同的echarts 特殊處理

需要進行特殊處理?

比如強制進行resize 的方法不然大小顯示會出現問題

我先把全部的代碼弄上

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { useBrandStore } from '@/store/modules/brand'
import { Chart } from '@antv/g2'
import * as  echarts from 'echarts'
import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'const brandStore = useBrandStore()
const route = useRoute()
const chart1 = ref(null)
const chart2 = ref(null)
const chartInstances = ref<{chart1: echarts.ECharts | nullchart2: echarts.ECharts | null
}>({chart1: null,chart2: null
})// 初始化圖表實例
const initChartInstance = (container: HTMLElement | null) => {if (!container) return nullreturn echarts.init(container)
}// 初始化所有圖表
const initAllCharts = () => {chartInstances.value.chart1 = initChartInstance(chart1.value)chartInstances.value.chart2 = initChartInstance(chart2.value)// 設置初始選項if (chartInstances.value.chart1) {initChart1()}if (chartInstances.value.chart2) {initChart2()}// 添加resize事件監聽const resizeHandler = () => {Object.values(chartInstances.value).forEach(chart => {chart?.resize()})}window.addEventListener('resize', resizeHandler)// 組件卸載時清理onBeforeUnmount(() => {window.removeEventListener('resize', resizeHandler)Object.values(chartInstances.value).forEach(chart => {chart?.dispose()})})
}const initChart = () => {var myChart = echarts.init(document.getElementById('chartContainer'));var option = {tooltip: {trigger: 'axis', // 觸發類型，'axis' 表示在坐標軸上觸發formatter: function (params) {// 自定義提示框內容var result = params[0].axisValue + '<br/>';result += '曝光數: ' + params[0].data;return result;}},grid: {top: 5,right: 5,bottom: 5,left: 5},xAxis: {type: 'category',// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],show: false},yAxis: {type: 'value',show: false},series: [{data: [264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,546, 983, 340, 539, 243, 226, 192,],type: 'line',smooth: true,areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(128, 109, 224, 0.3)'}, {offset: 1,color: 'rgba(128, 109, 224, 0)'}])},lineStyle: {color: '#806de0'},symbol: 'none'}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}const tabs = ref(["詢單轉換分析圖", "熱度數據分析圖"])
const activeTab = ref(0)
onMounted(() => {initChart()initAllCharts()})
const handleChangeTabs = async(index: any) => {activeTab.value = index// 等待DOM更新完成await nextTick()// 強制觸發所有圖表的resizeObject.values(chartInstances.value).forEach(chart => {chart?.resize()})if (index == 0) {initChart1()}if (index == 1) {initChart2()}
}const initChart1 = () => {var myChart = echarts.init(chart1.value);// 指定圖表的配置項和數據var option = {title: {// text: '詢單轉化分析圖',// subtext: '熱度數據分析圖'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['詢單次', '支付單數'],},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['2025-05-29', '2025-05-30', '2025-05-31', '2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04']},yAxis: {type: 'value'},series: [{name: '詢單次',type: 'bar',barWidth: '40%', // 調整柱子的寬度itemStyle: {color: '#1E90FF' // 藍色},data: [50, 300, 600, 580, 480, 280, 100]},{name: '支付單數',type: 'bar',barWidth: '40%',itemStyle: {color: '#00CED1' // 綠色},data: [200, 400, 450, 300, 200, 100, 20]}]};// 使用配置項顯示圖表myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}
const initChart2 = () => {const myChart = echarts.init(chart2.value);const option = {title: {// text: '數據趨勢分析',// subtext: '想要數、瀏覽數、曝光數變化趨勢',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['想要數', '瀏覽數', '曝光數'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['2025-05-28', '2025-05-29', '2025-05-30', '2025-05-31', '2025-06-01', '2025-06-02', '2025-06-03']},yAxis: {type: 'value'},series: [{name: '曝光數',type: 'line',stack: '總量',areaStyle: {},emphasis: {focus: 'series'},data: [10, 20, 200, 180, 10, 5, 2],itemStyle: {color: '#73DDD7' // 淺青色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8},{name: '瀏覽數',type: 'line',stack: '總量',areaStyle: {},emphasis: {focus: 'series'},data: [5, 15, 160, 150, 8, 3, 1],itemStyle: {color: '#FFD591' // 淺橙色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8},{name: '想要數',type: 'line',stack: '總量',areaStyle: {},emphasis: {focus: 'series'},data: [2, 10, 80, 70, 5, 2, 0.5],itemStyle: {color: '#A6C8FF' // 淺藍色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8}]};myChart.setOption(option);// 響應式調整window.addEventListener('resize', function () {myChart.resize();});
}const storeList = ref([{id: 1,name: "xxxxxxxxxx",number: 323214},{id: 2,name: "xxxxxxxxxx",number: 323214},{id: 3,name: "xxxxxxxxxx",number: 323214},{id: 4,name: "xxxxxxxxxx",number: 323214},{id: 5,name: "xxxxxxxxxx",number: 323214},{id: 6,name: "xxxxxxxxxx",number: 323214},{id: 7,name: "xxxxxxxxxx",number: 323214},{id: 8,name: "xxxxxxxxxx",number: 323214},{id: 9,name: "xxxxxxxxxx",number: 323214},{id: 10,name: "xxxxxxxxxx",number: 323214},{id: 1,name: "xxxxxxxxxx",number: 323214},{id: 2,name: "xxxxxxxxxx",number: 323214},{id: 3,name: "xxxxxxxxxx",number: 323214},{id: 4,name: "xxxxxxxxxx",number: 323214},{id: 5,name: "xxxxxxxxxx",number: 323214},{id: 6,name: "xxxxxxxxxx",number: 323214},{id: 7,name: "xxxxxxxxxx",number: 323214},{id: 8,name: "xxxxxxxxxx",number: 323214},{id: 9,name: "xxxxxxxxxx",number: 323214},{id: 10,name: "xxxxxxxxxx",number: 323214}
])</script>
<template><page-container :title="route.meta.title"><!-- <a-card>待開發...</a-card> --><a-row :gutter="[16, 24]"><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代訂-詢單次數-今日實時</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付單數 35單</span><span>轉換率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代訂-訂單提交-今日實時</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付單數 35單</span><span>轉換率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代訂-訂單利潤-今日實時</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付單數 35單</span><span>轉換率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>今日曝光新增</div><InfoCircleOutlined /></div><div class="col-data-item__number">8,846</div><div class="col-data-item__compare"><div id="chartContainer" style="width: 100%; height: 80px"></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div></div></a-card></a-col></a-row><div class="echart-content-container"><div class="row1"><div class="left-tabs"><div class="item" v-for="(item, index) in tabs" @click="handleChangeTabs(index)":class="{ active: index === activeTab }" :key="index">{{ item }}</div></div></div><a-row :gutter="24"><a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"><div class="left-chart1" v-show="activeTab == 0"><div ref="chart1" style="width: 100%; height: 100%;"></div></div><div class="left-chart1" v-show="activeTab == 1"><div ref="chart2" style="width: 100%; height: 100%;"></div></div></a-col><a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"><div class="right-chart1"><div class="list-product"><div class="item" v-for="(item, index) in storeList" :key="index"><div class="left"><div class="number">{{ item.id }}</div><div class="name">{{ item.name }}</div></div><div class="right">{{ item.number }}</div></div></div></div></a-col></a-row></div><!-- <a-row :gutter="[16, 24]"></a-row> --></page-container>
</template><style lang="less" scoped>
.echart-content-container {padding: 20px;border-radius: 5px;margin-top: 20px;background-color: #fff;.row1 {padding: 10px 0;border-bottom: 1px solid #eee;.left-tabs {display: flex;align-items: center;.item {font-size: 14px;color: #000;cursor: pointer;transition: all 0.6s;}.item:nth-child(n+2) {margin-left: 20px;}.active {color: #1890ff;position: relative;&::after {content: "";height: 2px;width: 100%;position: absolute;top: 30px;left: 0;background-color: #1890ff;transition: all 0.6s;/* 可選：為下劃線添加過渡效果 */}}}}.left-chart1 {width: 100%;height: 400px; // 固定高度確保圖表顯示min-height: 400px; // 防止內容壓縮#chart1 {width: 100%;height: 100%;}#chart2 {width: 100%;height: 100%;}}.right-chart1 {width: 100%;height: 400px; // 與左側保持一致padding-left: 20px; // 替代 margin-left 更安全.list-product {height: 100%;overflow-y: auto; // 明確指定垂直滾動padding: 10px;background: #fff;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);.item {display: flex;justify-content: space-between;align-items: center; // 垂直居中padding: 12px 0;border-bottom: 1px solid #f0f0f0;.left {display: flex;align-items: center;.number {font-weight: bold;color: #1890ff;min-width: 24px; // 防止數字跳動}.name {margin-left: 12px;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px; // 防止過長文本}}.right {font-weight: bold;color: #52c41a;}}.item:last-child {border-bottom: none; // 移除最后一項的下邊框}}}// 響應式調整@media (max-width: 768px) {.left-chart1 {margin-top: 20px;padding-left: 0;height: auto;max-height: 300px;width: 100%;}}
}.col-data-item {height: 200px;.col-data-item__title {display: flex;align-items: center;justify-content: space-between;font-size: 16px;color: #858a99;}.col-data-item__number {font-size: 24px;font-weight: 700;margin-top: 5px;}.col-data-item__compare {display: flex;align-items: center;margin-top: 10px;.compare_1 {display: flex;align-items: center;.compare_1__title {}.compare_1__number {margin-left: 10px;}}.compare_2 {display: flex;align-items: center;margin-left: 30px;.compare_1__title {}.compare_1__number {margin-left: 10px;}}}
}.hiddenText {display: inline-block;width: 1000px;overflow: hidden;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}a:hover {color: red;
}.one {width: 100%;height: 400px;
}
</style>

這里的 chart1 和chart2 是這兩個echarts 圖

進行tabs 切換的時候這兩個echarts 其實是一開始是顯示好的

目前我是這樣處理的在點擊tabs 的時候? 顯示echarts? 當前的echarts 的大小會有問題

目前我沒想到怎么處理