fix: 完善echart 图表

src/views/Main/DailyPatrolCard/index.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 defineOptions({
-  name: "DailyPatrolCard",
+  name: 'DailyPatrolCard'
 });
 let chart: echarts.ECharts | undefined;
 const chartRef = ref();
@@ -26,7 +26,7 @@ const handleResize = () => {
 };
 onMounted(() => {
   chart = echarts.init(chartRef.value);
-  const pieName = ["一般", "重大", "较大", "紧急"];
+  const pieName = ['一般', '重大', '较大', '紧急'];
   const pieValue = [545, 21, 300, 64];
   let count: any = 0;
 
@@ -34,26 +34,26 @@ onMounted(() => {
   for (var i = 0; i < pieName.length; i++) {
     pieData.push({
       name: pieName[i],
-      value: pieValue[i],
+      value: pieValue[i]
     });
     count += pieValue[i];
   }
   const legendStyle = {
-    type: "scroll",
+    type: 'scroll',
     // orient: 'vertical',
     // height: '95%',
-    width: "50%",
+    width: '50%',
-    left: "50%",
+    left: '50%',
-    textAlign: "left",
+    textAlign: 'left',
-    align: "left",
+    align: 'left',
-    icon: "circle", //设置为圆，删除则为矩形
+    icon: 'circle', //设置为圆，删除则为矩形
     itemWidth: 10,
     itemHeight: 10,
     itemGap: 44, // 44
     formatter: function (name: any) {
       for (var i = 0; i < pieName.length; i++) {
         if (name == pieData[i].name) {
-          return "{name|" + name + "}{rate|" + pieValue[i] + "}";
+          return '{name|' + name + '}{rate|' + pieValue[i] + '}';
         }
       }
     },
@@ -65,94 +65,106 @@ onMounted(() => {
           width: 60,
           height: 24,
           padding: [0, 0, 0, 5],
-          color: "rgba(0, 0, 0, 0.55)",
+          color: 'rgba(0, 0, 0, 0.55)'
         },
         rate: {
           fontSize: 18,
-          fontWeight: "bold",
+          fontWeight: 'bold',
-          fontFamily: "Microsoft YaHei",
+          fontFamily: 'Microsoft YaHei',
           height: 24,
           width: 30,
           padding: [60, 0, 0, -60],
-          color: "rgba(0, 0, 0, 0.9)",
+          color: 'rgba(0, 0, 0, 0.9)'
-        },
+        }
-      },
+      }
-    },
+    }
   };
   // Chart options
   const option = {
     tooltip: {
-      trigger: "item",
+      trigger: 'item',
-      formatter: "{a} <br/>{b}: {c} ({d}%)",
+      // formatter: '{a} <br/>{b}: {c} ({d}%)'
-    },
-    title: {
-      text: count,
-      subtext: "待处理问题",
-      x: "10%",
-      y: "34%",
-      align: "center",
-      textStyle: {
-        color: "rgba(0, 0, 0, 0.9)",
-        fontSize: 32,
-        lineHeight: 32, // 39
-        fontWeight: "bold",
-        fontFamily: "DIN",
-      },
-      subtextStyle: {
-        color: "rgba(0, 0, 0, 0.6)",
-        fontSize: 14,
-        fontWeight: 500,
-        lineHeight: 2, // 24
-        padding: [-20, 0, 0, 0],
-        fontFamily: "PingFang SC",
-      },
     },
-    color: ["#4293F4", "#FFDD77", "#FF9A23", "#F26161"],
+    color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
     legend: [
       {
-        top: "15%",
+        top: '15%',
         // 显示前两个
         data: pieName.slice(0, 2),
-        ...legendStyle,
+        ...legendStyle
       },
       {
-        top: "55%",
+        top: '55%',
         // 显示前两个
         data: pieName.slice(2, 4),
-        ...legendStyle,
+        ...legendStyle
-      },
+      }
     ],
     series: [
       {
-        name: "问题类型",
+        // name: '问题类型',
-        type: "pie",
+        type: 'pie',
-        radius: ["75%", "95%"],
+        radius: ['52%', '70%'],
-        center: ["20%", "50%"],
+        center: ['20%', '50%'],
         avoidLabelOverlap: false,
         label: {
-          show: false,
+          show: false
         },
         emphasis: {
           label: {
-            show: false,
+            show: false
-          },
+          }
         },
         labelLine: {
-          show: false,
+          show: false
         },
-        data: pieData,
+        data: pieData
       },
-    ],
+      {
+        name: '待处理问题',
+        type: 'pie',
+        radius: ['0', '30%'],
+        center: ['20%', '50%'],
+        z: 0,
+        itemStyle: {
+          color: 'transparent',
+          borderWidth: 0,
+          borderColor: '#eee'
+        },
+        label: {
+          position: 'center',
+          formatter: function () {
+            return ['{total|' + count + '}', '{label|待处理问题}'].join('\n');
+          },
+          rich: {
+            total: {
+              color: '#000',
+              fontSize: 28,
+              fontWeight: 'bold',
+              fontFamily: 'DIN',
+              lineHeight: 34
+            },
+            label: {
+              color: 'rgba(0, 0, 0, 0.6)',
+              fontSize: 14,
+              lineHeight: 18,
+              fontFamily: 'Source Han Sans'
+            }
+          }
+        },
+        data: [{ value: 1, name: '', tooltip: { show: false} }]
+      }
+    ]
   };
 
   // Set options and render chart
   chart.setOption(option);
 
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 onBeforeUnmount(() => {
   chart?.dispose();
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
@@ -182,7 +194,7 @@ onBeforeUnmount(() => {
       line-height: 22px;
       letter-spacing: 0px;
 
-      font-variation-settings: "opsz" auto;
+      font-variation-settings: 'opsz' auto;
       color: rgba(0, 0, 0, 0.55);
       span {
         font-family: DIN;
@@ -191,7 +203,7 @@ onBeforeUnmount(() => {
         line-height: 22px;
         letter-spacing: 0px;
 
-        font-variation-settings: "opsz" auto;
+        font-variation-settings: 'opsz' auto;
         color: #28ce8e;
       }
     }

src/views/Main/ProjectCountCard/index.vue

@@ -69,12 +69,13 @@ onMounted(() => {
             fontSize: 16,
             fontWeight: 400,
             height: 24,
+            width: 60,
             padding: [0, 0, 0, 5],
             color: 'rgba(0, 0, 0, 0.55)'
           },
           rate: {
             fontSize: 18,
-            fontWeight: 500,
+            fontWeight: 'bold',
             fontFamily: 'Microsoft YaHei',
             height: 24,
             padding: [48, 0, 0, -60],
@@ -82,7 +83,7 @@ onMounted(() => {
           },
           unit: {
             fontSize: 16,
-            fontWeight: 500,
+            fontWeight: 'bold',
             fontFamily: 'Microsoft YaHei',
             height: 24,
             padding: [48, 0, 0, 9],
@@ -160,7 +161,7 @@ onMounted(() => {
             }
           }
         },
-        data: [{ value: 1, name: '总数' }]
+        data: [{ value: 1, name: '总数', tooltip: { show: false} }]
       }
     ]
   };

src/views/Main/RiskInspectionCard/index.vue

@@ -15,12 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import "echarts-liquidfill";
+import 'echarts-liquidfill';
-import "echarts-liquidfill/src/liquidFill.js";
+import 'echarts-liquidfill/src/liquidFill.js';
 defineOptions({
-  name: "RiskInspectionCard",
+  name: 'RiskInspectionCard'
 });
 const problemEchartRef = ref();
 const questEchartRef = ref();
@@ -33,144 +33,147 @@ const handleResize = () => {
 onMounted(() => {
   leftChart = echarts.init(problemEchartRef.value);
 
-  const color = ["#FFBC37", "#429BF4"];
+  const color = ['#FFBC37', '#429BF4'];
   const dataStyle = {
     normal: {
       label: {
-        show: false,
+        show: false
       },
       labelLine: {
-        show: false,
+        show: false
       },
       shadowBlur: 40,
       borderWidth: 10,
-      shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
+      shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-    },
+    }
   };
   const placeHolderStyle = {
     normal: {
-      color: "rgba(255, 255, 255, 0.4)",
+      color: 'rgba(255, 255, 255, 0.4)',
       label: {
-        show: false,
+        show: false
       },
       labelLine: {
-        show: false,
+        show: false
-      },
+      }
     },
     emphasis: {
-      color: "rgba(255, 255, 255, 0.4)",
+      color: 'rgba(255, 255, 255, 0.4)'
     },
     tooltip: {
-      show: false,
+      show: false
-    },
+    }
   };
-  const legendName = ["数量", "问题数"];
+  const legendName = ['数量', '问题数'];
   const pieValue = [98, 56];
   var pieData: any = [];
   for (var i = 0; i < legendName.length; i++) {
     pieData.push({
       name: legendName[i],
-      value: pieValue[i],
+      value: pieValue[i]
     });
   }
+  const leftCenterValue = ['50%', '37%']
 
   // Chart options for the left side (nested pie)
   const leftOption = {
     tooltip: {
-      trigger: "item",
+      trigger: 'item',
-      formatter: "{b}: {c}",
+      formatter: '{b}: {c}'
     },
-    color: ["#FFBC37", "#FFBC37"],
+    color: ['#FFBC37', '#FFBC37'],
     title: {
       text: pieValue[0],
-      subtext: "工程总数",
+      subtext: '工程总数',
-      x: "center",
+      x: 'center',
-      y: "20%",
+      y: '20%',
       textStyle: {
-        color: "rgba(0, 0, 0, 0.9)",
+        color: 'rgba(0, 0, 0, 0.9)',
         fontSize: 32,
         lineHeight: 32, // 39
-        fontWeight: "bold",
+        fontWeight: 'bold',
-        fontFamily: "DIN",
+        fontFamily: 'DIN'
       },
       subtextStyle: {
-        color: "rgba(0, 0, 0, 0.6)",
+        color: 'rgba(0, 0, 0, 0.6)',
         fontSize: 14,
         fontWeight: 500,
         lineHeight: 2, // 24
         padding: [-20, 0, 0, 0],
-        fontFamily: "PingFang SC",
+        fontFamily: 'PingFang SC'
-      },
+      }
     },
     legend: {
       show: true,
       // orient: 'vertical',
       // x: '50%',
-      icon: "circle",
+      icon: 'circle',
-      top: "bottom",
+      top: 'bottom',
-      itemGap: 10, // 16
+      itemGap: 16, // 16
       itemWidth: 8,
       itemHeight: 8,
-      width: "100%",
+      width: '100%',
       textStyle: {
         rich: {
           name: {
             fontSize: 14,
             height: 25,
+            width: 40,
             padding: [0, 8, 0, 5],
-            color: "rgba(0, 0, 0, 0.55)",
+            color: 'rgba(0, 0, 0, 0.55)'
           },
           rate: {
             fontSize: 16,
-            fontWeight: 500,
+            fontWeight: 'bold',
             height: 35,
-            color: "rgba(0, 0, 0, 0.9)",
+            padding: [50, 8, 0, -45],
-          },
+            color: 'rgba(0, 0, 0, 0.9)'
-        },
+          }
+        }
       },
       data: legendName,
       formatter: function (name: any) {
         for (var i = 0; i < legendName.length; i++) {
           if (name == pieData[i].name) {
-            return "{name|" + name + "}{rate|" + pieValue[i] + "}";
+            return '{name|' + name + '}{rate|' + pieValue[i] + '}';
+          }
         }
       }
-      },
     },
     series: [
       {
-        name: "数量",
+        name: '数量',
-        type: "pie",
+        type: 'pie',
         clockWise: false,
-        radius: ["74%", "82%"],
+        radius: ['70%', '78%'],
-        center: ["50%", "40%"],
+        center: leftCenterValue,
         itemStyle: dataStyle,
         hoverAnimation: false,
         label: {
-          borderRadius: "10",
+          borderRadius: '10'
         },
         color: color[0],
         data: [
           {
             // 灰色部分数据
             value: pieValue[1],
-            name: "",
+            name: '',
             tooltip: {
-              show: false,
+              show: false
             },
-            itemStyle: placeHolderStyle,
+            itemStyle: placeHolderStyle
           },
           {
             value: pieValue[0],
-            name: "数量",
+            name: '数量'
-          },
+          }
-        ],
+        ]
       },
       {
-        name: "问题数",
+        name: '问题数',
-        type: "pie",
+        type: 'pie',
-        radius: ["54%", "62%"],
+        radius: ['56%', '64%'],
-        center: ["50%", "40%"],
+        center: leftCenterValue,
         clockWise: false,
         itemStyle: dataStyle,
         hoverAnimation: false,
@@ -179,123 +182,207 @@ onMounted(() => {
           {
             // 灰色部分数据
             value: pieValue[0],
-            name: "",
+            name: '',
             tooltip: {
-              show: false,
+              show: false
             },
-            itemStyle: placeHolderStyle,
+            itemStyle: placeHolderStyle
           },
           {
             value: pieValue[1],
-            name: "问题数",
+            name: '问题数'
-          },
+          }
-        ],
+        ]
-      },
+      }
-    ],
+    ]
   };
 
   // Set options and render left chart
   leftChart.setOption(leftOption);
 
   rightChart = echarts.init(questEchartRef.value);
+  const li_qu_legend = ['任务数', '已完成'];
+  const taskNum = 98;
+  const accomplishNum = 30;
+  const li_qu_data = [
+    {
+      name: li_qu_legend[0],
+      value: taskNum
+    },
+    {
+      name: li_qu_legend[1],
+      value: accomplishNum
+    }
+  ];
+
+  // 占比率
+  const li_qu_count: any = accomplishNum / taskNum;
 
+  const titleStyle = {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: 'rgba(0, 0, 0, 0.9)',
+    textAlign: 'center',
+    textShadowBlur: '0',
+    textShadowOffsetX: 0,
+    textShadowOffsetY: 1
+  };
+  const centerValue = ['50%', '37%']
   // Chart options for the right side (liquidFill)
   const rightOption = {
+    title: [
+      {
+        text: (li_qu_count * 100).toFixed(1) + '%',
+        subtext: '占比：',
+        x: 'center',
+        y: 'center',
+        subtextStyle: {
+          color: 'rgba(0, 0, 0, 0.6)',
+          fontSize: 14,
+          fontWeight: 'bold',
+          align: 'center',
+          lineHeight: 16 // 20
+        },
+        left: '50%',
+        top: '25%',
+        textAlign: 'center',
+        textStyle: titleStyle
+      }
+    ],
+    legend: {
+      icon: 'circle',
+      bottom: '2%',
+      itemGap: 16,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemStyle: {
+        borderWidth: 2, // 4
+        borderColor: '#3AFFDE'
+      },
+      textStyle: {
+        rich: {
+          name: {
+            fontSize: 14,
+            height: 25,
+            width: 40,
+            padding: [0, 8, 0, 5],
+            color: 'rgba(0, 0, 0, 0.55)'
+          },
+          rate: {
+            fontSize: 16,
+            fontWeight: 'bold',
+            height: 35,
+            padding: [50, 8, 0, -45],
+            color: 'rgba(0, 0, 0, 0.9)'
+          }
+        }
+      },
+      data: li_qu_legend,
+      formatter: function (name: any) {
+        for (var i = 0; i < li_qu_legend.length; i++) {
+          if (name == li_qu_data[i].name) {
+            return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}';
+          }
+        }
+      }
+    },
     series: [
       {
-        type: "liquidFill",
+        type: 'liquidFill',
-        radius: "30%",
+        radius: '70%',
         z: 4,
-        center: ["50%", "50%"],
+        center: centerValue,
         amplitude: 5,
         data: [0.5],
         itemStyle: {
           normal: {
-            color: "#28CE8E",
+            color: '#28CE8E',
             label: {
-              show: false,
+              show: false
-            },
+            }
-          },
+          }
         },
         backgroundStyle: {
           borderWidth: 0,
-          color: "transparent",
+          color: 'transparent'
         },
         label: {
           normal: {
-            formatter: "",
+            formatter: ''
-          },
+          }
         },
         outline: {
-          show: true,
+          show: false,
           itemStyle: {
-            borderWidth: 0,
+            borderWidth: 0
-          },
-          borderDistance: 0,
           },
+          borderDistance: 0
+        }
       },
       {
-        name: legendName[0],
+        name: li_qu_legend[0],
-        type: "pie",
+        type: 'pie',
         z: 1,
-        radius: ["0%", "31%"],
+        radius: ['0%', '72%'],
-        center: ["50%", "50%"],
+        center: centerValue,
         hoverAnimation: false,
         itemStyle: {
           normal: {
             label: {
-              show: false,
+              show: false
-            },
+            }
-          },
+          }
         },
+        color: ['#fff'],
         data: [
           {
             value: 1,
             itemStyle: {
               normal: {
-                color: "rgba(255, 255, 255, 1)",
+                color: 'rgba(255, 255, 255, 1)'
-              },
+              }
-            },
+            }
-          },
+          }
-        ],
+        ]
       },
       {
-        name: legendName[1],
+        name: li_qu_legend[1],
-        type: "pie",
+        type: 'pie',
         z: 1,
-        radius: ["0%", "31%"],
+        radius: ['0%', '72%'],
-        center: ["50%", "50%"],
+        center: centerValue,
         hoverAnimation: false,
         itemStyle: {
           normal: {
             label: {
-              show: false,
+              show: false
-            },
+            }
-          },
+          }
         },
+        color: ['#fff'],
         data: [
           {
             value: 0,
             itemStyle: {
               normal: {
-                color: "rgba(255, 255, 255, 1)",
+                color: 'rgba(255, 255, 255, 1)'
-              },
+              }
-            },
+            }
-          },
+          }
-        ],
+        ]
-      },
+      }
-    ],
+    ]
   };
 
   // Set options and render right chart
   rightChart.setOption(rightOption);
 
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 onBeforeUnmount(() => {
   leftChart?.dispose();
   rightChart?.dispose();
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </script>