feat: 图表优化

src/views/Dashboard.vue

@@ -534,7 +534,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, type Ref } from 'vue'
 import * as echarts from 'echarts/core'
 
 import {
@@ -582,8 +582,20 @@ const orderChart3 = ref<HTMLDivElement | null>(null)
 // 图表实例数组
 const chartInstances: (echarts.ECharts | null)[] = [null, null, null]
 
+type ChartSeriesItem = {
+  name: string
+  data: (number | { value: number; count?: number })[]
+  color: string
+}
+type ChartConfig = {
+  title: string
+  legend: string[]
+  xAxisData: string[]
+  series: ChartSeriesItem[]
+}
+
 // 图表配置
-const chartConfig1 = ref({
+const chartConfig1 = ref<ChartConfig>({
   title: '订单趋势统计（单）',
   legend: ['接单数', '生产数', '发货数'],
   xAxisData: [''],
@@ -606,7 +618,7 @@ const chartConfig1 = ref({
   ],
 })
 
-const chartConfig2 = ref({
+const chartConfig2 = ref<ChartConfig>({
   title: '订单发货效率',
   legend: ['24H发货率', '48H发货率'],
   xAxisData: [''],
@@ -625,7 +637,7 @@ const chartConfig2 = ref({
   ],
 })
 
-const chartConfig3 = ref({
+const chartConfig3 = ref<ChartConfig>({
   title: '订单生产效率',
   legend: ['发货超时率'],
   xAxisData: [''],
@@ -633,14 +645,41 @@ const chartConfig3 = ref({
   series: [
     {
       name: '发货超时率',
-      data: [0],
+      data: [{ value: 0, count: 0 }],
       color: '#ff6845',
     },
   ],
 })
 
+const overtimeTooltipFormatter = (params: TooltipParam[]) =>
+  params
+    .map((item) => {
+      const dataObj =
+        item.data && typeof item.data === 'object'
+          ? (item.data as { value: number | string; count?: number })
+          : null
+      const count =
+        dataObj && typeof dataObj.count === 'number' ? dataObj.count : null
+      const valueText = `${item.value}%`
+      return `${item.marker}${item.seriesName}: ${valueText}${
+        count !== null ? `（${count}单）` : ''
+      }`
+    })
+    .join('<br/>')
+
 // 创建图表配置的函数
-const createChartOption = (config: typeof chartConfig1) => {
+type TooltipParam = {
+  marker: string
+  seriesName: string
+  value: number | string
+  data?: unknown
+}
+
+const createChartOption = (
+  config: Ref<ChartConfig>,
+  isPercent = false,
+  customFormatter?: (params: TooltipParam[]) => string,
+) => {
   const data = config.value
   return {
     title: {
@@ -658,6 +697,17 @@ const createChartOption = (config: typeof chartConfig1) => {
           backgroundColor: '#6a7985',
         },
       },
+      formatter:
+        customFormatter ??
+        ((params: TooltipParam[]) =>
+          params
+            .map(
+              (item) =>
+                `${item.marker}${item.seriesName}: ${
+                  isPercent ? `${item.value}%` : item.value
+                }`,
+            )
+            .join('<br/>')),
     },
     legend: {
       data: data.legend,
@@ -690,6 +740,11 @@ const createChartOption = (config: typeof chartConfig1) => {
     },
     yAxis: {
       type: 'value',
+      axisLabel: isPercent
+        ? {
+            formatter: '{value}%',
+          }
+        : undefined,
     },
     series: data.series.map((item) => ({
       name: item.name,
@@ -762,7 +817,7 @@ const getStatisticDataApi = async () => {
     .then((res) => {
       if (res.code === 200) {
         updateShipmentTrendChart(res.data, 0)
-        chartInstances[1]?.setOption(createChartOption(chartConfig2))
+        chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
       }
     })
     .catch((error) => {
@@ -777,7 +832,9 @@ const getStatisticDataApi = async () => {
     .then((res) => {
       if (res.code === 200) {
         updateOvertimeTrendChart(res.data, 0)
-        chartInstances[2]?.setOption(createChartOption(chartConfig3))
+        chartInstances[2]?.setOption(
+          createChartOption(chartConfig3, true, overtimeTooltipFormatter),
+        )
       }
     })
     .catch((error) => {
@@ -795,12 +852,14 @@ onMounted(async () => {
   // 订单发货效率
   if (orderChart2.value) {
     chartInstances[1] = echarts.init(orderChart2.value)
-    chartInstances[1]?.setOption(createChartOption(chartConfig2))
+    chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
   }
   // 订单生产效率
   if (orderChart3.value) {
     chartInstances[2] = echarts.init(orderChart3.value)
-    chartInstances[2]?.setOption(createChartOption(chartConfig3))
+    chartInstances[2]?.setOption(
+      createChartOption(chartConfig3, true, overtimeTooltipFormatter),
+    )
   }
   // 请求成功后立即更新对应的图表
   getStatisticDataApi()
@@ -819,10 +878,12 @@ const getchartTimes = async (v: string, type: string) => {
       chartInstances[0]?.setOption(createChartOption(chartConfig1))
     } else if (type == 'SHIPMENT_TREND') {
       updateShipmentTrendChart(data, v)
-      chartInstances[1]?.setOption(createChartOption(chartConfig2))
+      chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
     } else {
       updateOvertimeTrendChart(data, v)
-      chartInstances[2]?.setOption(createChartOption(chartConfig3))
+      chartInstances[2]?.setOption(
+        createChartOption(chartConfig3, true, overtimeTooltipFormatter),
+      )
     }
   } catch (error) {
     console.log(error)
@@ -866,6 +927,7 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
   const overtimeShipmentOrderNums = data.map(
     (el) => el.overtimeShipmentOrderNum,
   )
+  const overtimeShipmentRates = data.map((el) => el.overtimeShipmentRate)
   const startTimes = data.map((el) => el.startTime)
   const timerange = data.map((el) => `${el.startTime}-${el.endTime}`)
 
@@ -874,7 +936,12 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
   } else {
     chartConfig3.value.xAxisData = timerange
   }
-  chartConfig3.value.series[0].data = overtimeShipmentOrderNums
+  chartConfig3.value.series[0].data = overtimeShipmentRates.map(
+    (rate, idx) => ({
+      value: rate,
+      count: overtimeShipmentOrderNums[idx],
+    }),
+  )
 }
 
 const handleResize = () => {