feat: 添加图表加载的loading效果

src/views/Dashboard.vue

@@ -504,7 +504,12 @@
         >
         </el-radio-button>
       </el-radio-group>
-      <div ref="orderChart1" class="chart-container" style="width: 100%" />
+      <div
+        ref="orderChart1"
+        v-loading="orderChart1Loading"
+        class="chart-container"
+        style="width: 100%"
+      />
     </div>
     <div class="charts-row">
       <div class="chart-wrapper chart-half">
@@ -522,7 +527,12 @@
           >
           </el-radio-button>
         </el-radio-group>
-        <div ref="orderChart2" class="chart-container" style="width: 100%" />
+        <div
+          ref="orderChart2"
+          v-loading="orderChart2Loading"
+          class="chart-container"
+          style="width: 100%"
+        />
       </div>
       <div class="chart-wrapper chart-half">
         <el-radio-group
@@ -539,7 +549,12 @@
           >
           </el-radio-button>
         </el-radio-group>
-        <div ref="orderChart3" class="chart-container" style="width: 100%" />
+        <div
+          ref="orderChart3"
+          v-loading="orderChart3Loading"
+          class="chart-container"
+          style="width: 100%"
+        />
       </div>
     </div>
   </div>
@@ -575,6 +590,11 @@ echarts.use([
 // 获取统计数据
 const statisticData = ref<StatisticData | null>(null)
 
+// 图表 loading 状态（无数据时展示 loading）
+const orderChart1Loading = ref<boolean>(true)
+const orderChart2Loading = ref<boolean>(true)
+const orderChart3Loading = ref<boolean>(true)
+
 const timeOptions = ref<{ type: string; name: string }[]>([
   { type: '0', name: '日数据' },
   { type: '1', name: '周数据' },
@@ -894,6 +914,8 @@ const getStatisticDataApi = async () => {
       if (res.code === 200) {
         updateOrderTrendChart(res.data, 0)
         chartInstances[0]?.setOption(createChartOption(chartConfig1))
+        // 无数据时保持 loading，有数据则关闭
+        orderChart1Loading.value = !(res.data && res.data.length > 0)
       }
     })
     .catch((error) => {
@@ -909,6 +931,7 @@ const getStatisticDataApi = async () => {
       if (res.code === 200) {
         updateShipmentTrendChart(res.data, 0)
         chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
+        orderChart2Loading.value = !(res.data && res.data.length > 0)
       }
     })
     .catch((error) => {
@@ -926,6 +949,7 @@ const getStatisticDataApi = async () => {
         chartInstances[2]?.setOption(
           createChartOption(chartConfig3, true, overtimeTooltipFormatter),
         )
+        orderChart3Loading.value = !(res.data && res.data.length > 0)
       }
     })
     .catch((error) => {
@@ -960,6 +984,15 @@ onMounted(async () => {
 
 const getchartTimes = async (v: string, type: string) => {
   try {
+    // 切换时间维度时先开启对应 loading，等数据返回后根据是否有数据决定是否保留
+    if (type === 'ORDER_TREND') {
+      orderChart1Loading.value = true
+    } else if (type === 'SHIPMENT_TREND') {
+      orderChart2Loading.value = true
+    } else if (type === 'OVERTIME_SHIPMENT_TREND') {
+      orderChart3Loading.value = true
+    }
+
     const { data } = await trendApi({
       timeUnit: v,
       trendType: type,
@@ -967,14 +1000,17 @@ const getchartTimes = async (v: string, type: string) => {
     if (type == 'ORDER_TREND') {
       updateOrderTrendChart(data, v)
       chartInstances[0]?.setOption(createChartOption(chartConfig1))
+      orderChart1Loading.value = !(data && data.length > 0)
     } else if (type == 'SHIPMENT_TREND') {
       updateShipmentTrendChart(data, v)
       chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
+      orderChart2Loading.value = !(data && data.length > 0)
     } else {
       updateOvertimeTrendChart(data, v)
       chartInstances[2]?.setOption(
         createChartOption(chartConfig3, true, overtimeTooltipFormatter),
       )
+      orderChart3Loading.value = !(data && data.length > 0)
     }
   } catch (error) {
     console.log(error)