feat: 完善数据展示首页的左侧图表交互

src/components/Charts/appearanceDailyAlertChart.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-08-14 10:33:46
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-15 15:18:21
+ * @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-08-14 10:33:46
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-15 15:17:39
+ * @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div
+    class="main-chart"
+    ref="mainChartRef"
+    id="appearanceDailyAlertChart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>

src/components/Charts/appearanceDailyDetectionChart.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+  datas: {
+    type: Array as PropType<Record<string, any>[]>,
+    default: () => [],
+  },
+});
+function initChart() {
+  const chartDom = document.getElementById("appearanceDailyDetectionChart");
+  const mainChart = echarts.init(chartDom);
+  const currDatas = [];
+
+  const option = {
+    color: ["red", "#B4C0CC"],
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b} {a}: {c}",
+    },
+    legend: {
+      data: ["蒸发量"],
+    },
+    toolbox: {
+      show: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: [
+          "1日",
+          "2日",
+          "3日",
+          "4日",
+          "5日",
+          "6日",
+          "7日",
+          "8日",
+          "9日",
+          "10日",
+          "11日",
+          "12日",
+          "13日",
+          "14日",
+          "15日",
+          "16日",
+        ],
+        splitLine: {
+          lineStyle: {
+            color: "#B4C0CC",
+            opacity: 0.1,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        z: 200,
+      },
+    ],
+    series: [
+      {
+        name: "",
+        type: "bar",
+        barWidth: "25%",
+        // barGap: '80%',
+        data: [
+          220, 240, 135, 16, 157, 200, 88, 14, 190, 220, 240, 135, 197, 21, 91,
+          100, 220,
+        ],
+        itemStyle: {
+          // normal: {
+          //   //渲染环形渐变色
+          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          //     {
+          //       offset: 0,
+          //       color: "#0055FF", // 0% 处的颜色
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: "#0783FA", // 100% 处的颜色
+          //     },
+          //   ]),
+          // },
+           normal: {
+          color: {
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            type: 'linear',
+            global: false,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#0055FF',
+              },
+              {
+                offset: 1,
+                color: '#0783FA', //底部渐变颜色
+              },
+            ],
+          },
+        },
+          emphasis: {
+            color: "#dbf0fc",
+          },
+        },
+      },
+    ],
+  };
+
+  mainChart.setOption(option);
+}
+
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<template>
+  <div
+    class="main-chart"
+    ref="mainChartRef"
+    id="appearanceDailyDetectionChart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>

src/components/Charts/poleMonitorChart.vue

@@ -38,6 +38,29 @@ const chartRefs = ref<Ref<HTMLDivElement | null>[]>([]);
 // ];
 
 // 数据
+const colors = [
+  [
+    {
+      offset: 0,
+      color: "rgba(14, 189, 232, 1)", // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: "#195EE9", // 100% 处的颜色
+    },
+  ],
+  [
+    {
+      offset: 0,
+      color: "#FFD682", // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: "#FEB217", // 100% 处的颜色
+    },
+  ],
+];
+
 const chartData = [
   { value: 65, name: "撑杆折断", color: "#488AFE" },
   { value: 35, name: "撑杆弯曲", color: "#F7D36D" },
@@ -77,59 +100,56 @@ function Pie() {
 const initMainChart = () => {
   const chartDom = document.getElementById("poleMonitorChart");
   const mainChart = echarts.init(chartDom);
-
+  const centerPoint = ["50%", "41%"];
   const option = {
-    backgroundColor: "#031845",
+    backgroundColor: "transparent",
     tooltip: {
       trigger: "item",
-      formatter: "{b} : {d}% <br/> {c}",
+      formatter: " {b} : {d}% <br/> {c}",
     },
 
     legend: {
       orient: "horizontal",
-      icon: "circle",
+      // icon: "circle",
       bottom: 20,
       x: "center",
       textStyle: {
         color: "#fff",
       },
-      data: ["呜哈哈", "穷哈哈", "吾叉叉", "穷叉叉"],
+      data: ["撑杆折断", "撑杆弯曲"],
     },
     series: [
       {
         type: "pie",
-        radius: ["35%", "50%"],
+        radius: ["45%", "68%"],
-        center: ["50%", "50%"],
+        center: centerPoint,
-        color: [
+        color: colors,
-          "#0E7CE2",
-          "#FF8352",
-          "#E271DE",
-          "#F8456B",
-          "#00FFFF",
-          "#4AEAB0",
-        ],
         itemStyle: {
           normal: {
             borderColor: "#031845",
             borderWidth: 10,
+            //渲染环形渐变色
+            color: function (params) {
+              return {
+                //type: 'linear',
+                x: 0,
+                y: 1,
+                x2: 1,
+                y2: 0,
+                colorStops: colors[params.dataIndex], // 100% 处的颜色
+                //globalCoord: false // 缺省为 false
+              };
+            },
           },
         },
         data: [
           {
-            value: 335,
+            value: 735,
-            name: "呜哈哈",
+            name: "撑杆折断",
           },
           {
             value: 310,
-            name: "穷哈哈",
+            name: "撑杆弯曲",
-          },
-          {
-            value: 234,
-            name: "吾叉叉",
-          },
-          {
-            value: 235,
-            name: "穷叉叉",
           },
         ],
         labelLine: {
@@ -145,38 +165,33 @@ const initMainChart = () => {
       },
       {
         type: "pie",
-        radius: ["12%", "14%"],
+        radius: ["0%", "15%"],
-        center: ["50%", "50%"],
+        center: centerPoint,
-        color: ["#ffffff", "red"],
+        color: ["#ffffff", "#ffffff"],
-        startAngle: 105,
+        startAngle: 360,
+        silent: true, //取消高亮
         data: [
           {
-            value: 30,
+            value: 270,
-            name: "",
+            name: "1",
             itemStyle: {
               normal: {
                 color: "transparent",
+                borderWidth: 2,
+                borderColor: "#ffffff",
               },
             },
           },
+
           {
-            value: 5,
+            value: 90,
-            name: "",
+            name: "2",
             itemStyle: {
               normal: {
                 color: "transparent",
               },
             },
           },
-          {
-            value: 65,
-            name: "ddd",
-            itemStyle: {
-              normal: {
-                color: "#ffffff",
-              },
-            },
-          },
         ],
         labelLine: {
           normal: {
@@ -191,9 +206,10 @@ const initMainChart = () => {
       },
       {
         type: "pie",
-        radius: [0, "16%"],
+        radius: [0, "14%"],
-        center: ["50%", "50%"],
+        center: ["51%", "39%"],
         startAngle: 90,
+        silent: true, //取消高亮
         data: [
           {
             value: 25,
@@ -201,7 +217,7 @@ const initMainChart = () => {
             itemStyle: {
               normal: {
                 color: "transparent",
-                borderWidth: 4,
+                borderWidth: 2,
                 borderColor: "#ffffff",
               },
             },
@@ -217,7 +233,7 @@ const initMainChart = () => {
             },
           },
         ],
-        selectedOffset: 10,
+        // selectedOffset: 10,
 
         labelLine: {
           normal: {
@@ -232,8 +248,8 @@ const initMainChart = () => {
       },
       {
         type: "pie",
-        radius: ["53%", "54%"],
+        radius: ["70%", "71%"],
-        center: ["50%", "50%"],
+        center: centerPoint,
         color: [
           "blue",
           "transparent",
@@ -284,7 +300,8 @@ const initMainChart = () => {
         type: "pie",
         zlevel: 0,
         silent: true,
-        radius: ["25%", "26%"],
+        radius: ["31%", "33%"],
+        center: centerPoint,
         z: 10,
         label: {
           normal: {
@@ -302,7 +319,8 @@ const initMainChart = () => {
         type: "pie",
         zlevel: 0,
         silent: true,
-        radius: ["34%", "36%"],
+        radius: ["43%", "45%"],
+        center: centerPoint,
         z: 10,
         startAngle: 90,
         label: {

src/components/Charts/totalChart.vue

@@ -198,14 +198,14 @@ const updateChart = () => {
         data: item,
         yAxisIndex: 0, // 使用左y轴
       },
-      {
+      // {
-        type: "bar",
+      //   type: "bar",
-        name: props.legendArr[index],
+      //   name: props.legendArr[index],
-        barWidth: 25,
+      //   barWidth: 25,
-        itemStyle: { color: "transparent" },
+      //   itemStyle: { color: "transparent" },
-        data: item,
+      //   data: item,
-        yAxisIndex: 1, // 使用左y轴
+      //   yAxisIndex: 1, // 使用左y轴
-      },
+      // },
     ])
     .flat();
 

src/components/Charts/vehicleMonitorChart.vue

@@ -36,56 +36,36 @@ function initChart() {
   let bgColor = "";
   let title = "总量";
   let color = [
-    "#c065e7",
-    "#765deb",
     "#3862d8",
-    "#6a89E2",
     "#219CF9",
     "#6efbbf",
     "#40c057",
     "#ffd351",
     "#ff8e43",
-    "#f56b6d",
   ];
   let echartData = [
     {
-      name: "A类",
+      name: "小门搭扣丢失",
       value: "3720",
     },
     {
-      name: "B类",
+      name: "门折页座脱落",
       value: "2920",
     },
     {
-      name: "C类",
+      name: "小窗裂纹",
       value: "2200",
     },
     {
-      name: "D类",
+      name: "搭扣未搭",
       value: "1420",
     },
     {
-      name: "E类",
+      name: "搭扣未搭",
       value: "3200",
     },
     {
-      name: "F类",
+      name: "下侧门板缺失",
-      value: "2420",
-    },
-    {
-      name: "G类",
-      value: "2200",
-    },
-    {
-      name: "H类",
-      value: "1420",
-    },
-    {
-      name: "I类",
-      value: "3200",
-    },
-    {
-      name: "J类",
       value: "2420",
     },
   ];
@@ -97,7 +77,7 @@ function initChart() {
     return a + b.value * 1;
   }, 0);
   const option = {
-    backgroundColor: bgColor,
+    backgroundColor: "transparent",
     color: color,
     tooltip: {
       trigger: "item",
@@ -132,8 +112,8 @@ function initChart() {
         },
         labelLine: {
           normal: {
-            length: 20,
+            length: 18,
-            length2: 30,
+            length2: 32,
             lineStyle: {
               // color: '#e6e6e6'
             },
@@ -142,7 +122,7 @@ function initChart() {
         label: {
           show: true,
           position: "outside",
-          formatter: "{name|{b}：{d}%}\n{icon|}",
+          formatter: "{name|{b}：}\n{rate|{d}%}\n{icon|}",
           rich: {
             icon: {
               backgroundColor: "inherit",
@@ -153,7 +133,13 @@ function initChart() {
             },
             name: {
               fontSize: "10",
-              padding: [-12, 15, -20, 15],
+              padding: [-12, 5, -20, 2],
+              color: "#fff",
+            },
+            rate: {
+              fontSize: "10",
+              align: 'left',
+              padding: [-12, 5, -50, 2],
               color: "#fff",
             },
           },

src/views/dashboard/AppearanceMonitor.vue

@@ -2,7 +2,7 @@
 import { onBeforeRouteLeave } from "vue-router";
 import { BaseTable } from "@/components/CustomTable";
 import SwiperMonitor from "./components/SwiperMonitor.vue";
-import PoleDailyDetectionChart from "@/components/Charts/poleDailyDetectionChart.vue";
+import AppearanceDailyDetectionChart from "@/components/Charts/appearanceDailyDetectionChart.vue";
 import PoleDailyAlertChart from "@/components/Charts/poleDailyAlertChart.vue";
 import AppearanceAlarmModal from "./components/AppearanceAlarmModal.vue";
 import DeleteModal from "./components/DeleteModal.vue";
@@ -335,7 +335,7 @@ onMounted(() => {
       <li>
         <div class="fg-footer-charts-title">日检出量</div>
         <div class="fg-footer-charts-content">
-          <!-- <PoleDailyDetectionChart :data="dailyDetectionData" /> -->
+          <AppearanceDailyDetectionChart :datas="dailyDetectionData" />
         </div>
       </li>
       <li>

src/views/dashboard/DataOverview.vue

@@ -356,6 +356,7 @@ onMounted(() => {
               <span class="ml-[12px]">{{ v.name }}：</span>
               <span class="font-bold">{{ v.bindVal?.total || 0 }}</span>
             </div>
+            <!-- //TODO 使用echarts重构 https://echarts.zhangmuchen.top/#/detail?cid=164bb-40c1-e483-b7c9b-6cb171ad -->
             <DeviceStatus :deviceStatus="v.bindVal" />
           </li>
         </ul>