feat: 概览空数据优化

39faf252 · wusiyi · b13e4321 · 39faf252
Commit 39faf252 authored Dec 30, 2025 by wusiyi
Show whitespace changes
Inline Side-by-side

Showing with 196 additions and 10 deletions

src/views/Dashboard.vue
+196 -10

No files found.
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -814,7 +814,6 @@ const createChartOption = (
      left: '3%',
      right: '4%',
      bottom: '3%',
-      containLabel: true,
    },
    xAxis: {
      type: 'category',
@@ -977,9 +976,11 @@ const getStatisticDataApi = async () => {
  })
    .then((res) => {
      if (res.code === 200) {
+        const isEmpty = checkOrderTrendDataEmpty(res.data)
+        if (!isEmpty) {
          updateOrderTrendChart(res.data, 0)
-        chartInstances[0]?.setOption(createChartOption(chartConfig1))
+        }
-        // 无数据时保持 loading，有数据则关闭
+        updateChart(chartInstances[0], chartConfig1, isEmpty)
        orderChart1Loading.value = !(res.data && res.data.length > 0)
      }
    })
@@ -994,8 +995,11 @@ const getStatisticDataApi = async () => {
  })
    .then((res) => {
      if (res.code === 200) {
+        const isEmpty = checkShipmentTrendDataEmpty(res.data)
+        if (!isEmpty) {
          updateShipmentTrendChart(res.data, 0)
-        chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
+        }
+        updateChart(chartInstances[1], chartConfig2, isEmpty, true)
        orderChart2Loading.value = !(res.data && res.data.length > 0)
      }
    })
@@ -1010,9 +1014,16 @@ const getStatisticDataApi = async () => {
  })
    .then((res) => {
      if (res.code === 200) {
+        const isEmpty = checkOvertimeTrendDataEmpty(res.data)
+        if (!isEmpty) {
          updateOvertimeTrendChart(res.data, 0)
-        chartInstances[2]?.setOption(
+        }
-          createChartOption(chartConfig3, true, overtimeTooltipFormatter),
+        updateChart(
+          chartInstances[2],
+          chartConfig3,
+          isEmpty,
+          true,
+          overtimeTooltipFormatter,
        )
        orderChart3Loading.value = !(res.data && res.data.length > 0)
      }
@@ -1063,17 +1074,30 @@ const getchartTimes = async (v: string, type: string) => {
      trendType: type,
    })
    if (type == 'ORDER_TREND') {
+      const isEmpty = checkOrderTrendDataEmpty(data)
+      if (!isEmpty) {
        updateOrderTrendChart(data, v)
-      chartInstances[0]?.setOption(createChartOption(chartConfig1))
+      }
+      updateChart(chartInstances[0], chartConfig1, isEmpty)
      orderChart1Loading.value = !(data && data.length > 0)
    } else if (type == 'SHIPMENT_TREND') {
+      const isEmpty = checkShipmentTrendDataEmpty(data)
+      if (!isEmpty) {
        updateShipmentTrendChart(data, v)
-      chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
+      }
+      updateChart(chartInstances[1], chartConfig2, isEmpty, true)
      orderChart2Loading.value = !(data && data.length > 0)
    } else {
+      const isEmpty = checkOvertimeTrendDataEmpty(data)
+      if (!isEmpty) {
        updateOvertimeTrendChart(data, v)
-      chartInstances[2]?.setOption(
+      }
-        createChartOption(chartConfig3, true, overtimeTooltipFormatter),
+      updateChart(
+        chartInstances[2],
+        chartConfig3,
+        isEmpty,
+        true,
+        overtimeTooltipFormatter,
      )
      orderChart3Loading.value = !(data && data.length > 0)
    }
@@ -1082,6 +1106,147 @@ const getchartTimes = async (v: string, type: string) => {
  }
 }
+// 根据横坐标数据生成周期提示文字
+const generatePeriodText = (xAxisData: string[]): string => {
+  const startDate = xAxisData[0]
+  const endDate = xAxisData[xAxisData.length - 1]
+  return `当前周期（${startDate} 至 ${endDate}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
+}
+// 更新图表（统一处理空状态和正常状态）
+const updateChart = (
+  instance: echarts.ECharts | null,
+  config: Ref<ChartConfig>,
+  isEmpty: boolean,
+  isPercent = false,
+  customFormatter?: (params: TooltipParam[]) => string,
+) => {
+  if (!instance) return
+  if (isEmpty) {
+    const periodText = generatePeriodText(config.value.xAxisData)
+    setNotopt(instance, config, periodText, isPercent)
+  } else {
+    // 使用 notMerge: true 完全替换配置，确保从空状态切换回来时配置正确
+    instance.setOption(
+      createChartOption(config, isPercent, customFormatter),
+      true,
+    )
+  }
+}
+// 图表空状态
+const setNotopt = (
+  demo: echarts.ECharts | null,
+  config: Ref<ChartConfig>,
+  subtext = '暂无数据',
+  isPercent = false,
+) => {
+  if (!demo) return
+  const chartData = config.value
+  const option = {
+    title: [
+      {
+        text: chartData.title,
+        left: 'left',
+      },
+      {
+        text: ' {a|}',
+        x: 'center',
+        y: 'center',
+        subtext,
+        itemGap: -20,
+        textStyle: {
+          rich: {
+            a: {
+              color: '#000',
+              fontSize: '16',
+              height: 120,
+              width: 220,
+              backgroundColor: {
+                image:
+                  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==',
+              },
+            },
+          },
+        },
+        subtextStyle: {
+          fontSize: 16,
+        },
+      },
+    ],
+    // 图例
+    legend: {
+      data: chartData.legend,
+      top: 'top',
+      left: 'center',
+    },
+    // 横坐标
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: chartData.xAxisData,
+      axisLabel: {
+        overflow: 'truncate',
+        width: 120,
+        formatter: function (value: string) {
+          if (value.length > 10) {
+            return value.substring(0, 10) + '...'
+          }
+          return value
+        },
+      },
+    },
+    // 网格配置
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+    },
+    // 纵坐标，默认范围从0到1
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 1,
+      axisLabel: isPercent
+        ? {
+            formatter: '{value}%',
+            color: '#666',
+          }
+        : {
+            color: '#666',
+          },
+      axisLine: {
+        lineStyle: { color: '#ccc' },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    // 清空 series 数据
+    series: chartData.series.map((item) => ({
+      name: item.name,
+      type: 'line',
+      data: [],
+      color: item.color,
+    })),
+  }
+  demo.setOption(option, true)
+}
+// 检查订单趋势数据是否为空
+const checkOrderTrendDataEmpty = (data: trendType[]): boolean => {
+  const confirmNums = data.map((el) => el.confirmNum)
+  const produceNums = data.map((el) => el.produceNum)
+  const shipmentNums = data.map((el) => el.shipmentNum)
+  const hasData =
+    confirmNums.some((item) => item !== 0) ||
+    produceNums.some((item) => item !== 0) ||
+    shipmentNums.some((item) => item !== 0)
+  return !hasData
+}
+// 更新订单趋势图表数据
 const updateOrderTrendChart = (data: trendType[], type: number | string) => {
  const confirmNums = data.map((el) => el.confirmNum)
  const produceNums = data.map((el) => el.produceNum)
@@ -1094,11 +1259,23 @@ const updateOrderTrendChart = (data: trendType[], type: number | string) => {
  } else {
    chartConfig1.value.xAxisData = timerange
  }
  chartConfig1.value.series[0].data = confirmNums
  chartConfig1.value.series[1].data = produceNums
  chartConfig1.value.series[2].data = shipmentNums
 }
+// 检查发货效率数据是否为空
+const checkShipmentTrendDataEmpty = (data: trendType[]): boolean => {
+  const shipmentRateOf24Hours = data.map((el) => el.shipmentRateOf24Hour)
+  const shipmentRateOf48Hours = data.map((el) => el.shipmentRateOf48Hour)
+  const hasData =
+    shipmentRateOf24Hours.some((item) => item !== 0) ||
+    shipmentRateOf48Hours.some((item) => item !== 0)
+  return !hasData
+}
+// 更新发货效率图表数据
 const updateShipmentTrendChart = (data: trendType[], type: number | string) => {
  const shipmentRateOf24Hours = data.map((el) => el.shipmentRateOf24Hour)
  const shipmentRateOf48Hours = data.map((el) => el.shipmentRateOf48Hour)
@@ -1115,6 +1292,14 @@ const updateShipmentTrendChart = (data: trendType[], type: number | string) => {
  chartConfig2.value.series[1].data = shipmentRateOf48Hours
 }
+// 检查超时情况数据是否为空
+const checkOvertimeTrendDataEmpty = (data: trendType[]): boolean => {
+  const overtimeShipmentRates = data.map((el) => el.overtimeShipmentRate)
+  const hasData = overtimeShipmentRates.some((item) => item !== 0)
+  return !hasData
+}
+// 更新超时情况图表数据
 const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
  const overtimeShipmentOrderNums = data.map(
    (el) => el.overtimeShipmentOrderNum,
@@ -1128,6 +1313,7 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
  } else {
    chartConfig3.value.xAxisData = timerange
  }
  chartConfig3.value.series[0].data = overtimeShipmentRates.map(
    (rate, idx) => ({
      value: rate,