Przeglądaj źródła

fix: admin-web走势图同步拆分为双Y轴 — 洗车量和费用独立比例尺

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 3 dni temu
rodzic
commit
9f9b30e7e8
1 zmienionych plików z 23 dodań i 25 usunięć
  1. 23 25
      admin-web/src/views/admin/index.vue

+ 23 - 25
admin-web/src/views/admin/index.vue

@@ -223,8 +223,17 @@ const initLineChart = (dataList: Array<any>) => {
       x: 'left',
       textStyle: {fontSize: '15', color: state.charts.color},
     },
-    grid: {top: 70, right: 0, bottom: 30, left: 50},
-    tooltip: {trigger: 'axis'},
+    grid: {top: 70, right: 80, bottom: 30, left: 50},
+    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: 20},
     xAxis: {
       data: xAxis,
@@ -233,22 +242,26 @@ const initLineChart = (dataList: Array<any>) => {
     yAxis: [
       {
         type: 'value',
-        name: '费用/元  洗车量/次',
+        name: '洗车量/次',
         position: 'left',
+        axisLabel: {color: '#68a7a0'},
         splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
       },
+      {
+        type: 'value',
+        name: '费用/元',
+        position: 'right',
+        axisLabel: {color: '#3770ff'},
+        splitLine: {show: false},
+      },
     ],
     series: [
       {
         name: '洗车量',
         type: 'bar',
         barWidth:10,
-        symbolSize: 6,
-        symbol: 'circle',
-        smooth: true,
+        yAxisIndex: 0,
         data: dataList.map(k => k.totalOrders),
-        // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
-        lineStyle: {color: '#68a7a0'},
         itemStyle: {color: '#68a7a0', borderColor: '#68a7a0', barBorderRadius: 5},
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -257,29 +270,14 @@ const initLineChart = (dataList: Array<any>) => {
           ]),
         },
       },
-      /*      {
-              name: '总金额',
-              type: 'line',
-              symbolSize: 6,
-              symbol: 'circle',
-              smooth: true,
-              data: dataList.map(k=>u.fmt.fmtMoney(k.totalMoney)),
-              lineStyle: {color: '#fe9a8b'},
-              itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {offset: 0, color: '#fe9a8bb3'},
-                  {offset: 1, color: '#fe9a8b03'},
-                ]),
-              },
-            },*/
       {
         name: '总金额',
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: dataList.map(k => u.fmt.fmtMoney(k.totalAmount)),
+        yAxisIndex: 1,
+        data: dataList.map(k => (k.totalAmount / 100).toFixed(2)),
         lineStyle: {color: '#3770ff'},
         itemStyle: {color: '#3770ff', borderColor: '#3770ff'},
         areaStyle: {