Jelajahi Sumber

fix: 走势图拆分为双Y轴 — 洗车量(左轴)和费用(右轴)独立比例尺

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 3 hari lalu
induk
melakukan
c304a273b5
1 mengubah file dengan 22 tambahan dan 4 penghapusan
  1. 22 4
      admin-web-new/src/views/admin/dashboard/index.vue

+ 22 - 4
admin-web-new/src/views/admin/dashboard/index.vue

@@ -137,7 +137,16 @@ const initLineChart = (dataList: Array<any>) => {
       textStyle: { fontSize: 15, color: state.charts.color }
     },
     grid: { top: 70, right: 80, bottom: 30, left: 60 },
-    tooltip: { trigger: "axis" },
+    tooltip: {
+      trigger: "axis",
+      formatter: (params: any) => {
+        const bar = params.find((p: any) => p.seriesName === "洗车量");
+        const line = params.find((p: any) => p.seriesName === "总金额");
+        const barVal = bar ? `${bar.value} 次` : "";
+        const lineVal = line ? `¥${line.value}` : "";
+        return `${params[0].axisValue}<br/>${barVal}<br/>${lineVal}`;
+      }
+    },
     legend: { data: ["洗车量", "总金额"], right: 10, top: 5 },
     xAxis: {
       data: dataList.map(k => k.startTime),
@@ -146,9 +155,17 @@ const initLineChart = (dataList: Array<any>) => {
     yAxis: [
       {
         type: "value",
-        name: "费用/元  洗车量/次",
+        name: "洗车量/次",
         position: "left",
+        axisLabel: { color: "#68a7a0" },
         splitLine: { show: true, lineStyle: { type: "dashed", color: "#f0f0f0" } }
+      },
+      {
+        type: "value",
+        name: "费用/元",
+        position: "right",
+        axisLabel: { color: "#409EFF" },
+        splitLine: { show: false }
       }
     ],
     series: [
@@ -156,7 +173,7 @@ const initLineChart = (dataList: Array<any>) => {
         name: "洗车量",
         type: "bar",
         barWidth: 10,
-        smooth: true,
+        yAxisIndex: 0,
         data: dataList.map(k => k.totalOrders),
         itemStyle: {
           color: "#68a7a0",
@@ -170,7 +187,8 @@ const initLineChart = (dataList: Array<any>) => {
         symbolSize: 6,
         symbol: "circle",
         smooth: true,
-        data: dataList.map(k => fmtMoney(k.totalAmount)),
+        yAxisIndex: 1,
+        data: dataList.map(k => (k.totalAmount / 100).toFixed(2)),
         lineStyle: { color: "#409EFF" },
         itemStyle: { color: "#409EFF", borderColor: "#409EFF" }
       }