更新 饼图样式

src/views/index/Index.vue

@@ -379,11 +379,21 @@ function drawPie(type) {
   let option;
 
   option = {
+    grid: {
+      bottom: 500,
+    },
+    legend: {
+      orient: "vertical",
+      left: "left",
+    },
+    tooltip: {
+      trigger: "item",
+    },
     series: [
       {
-        name: "Access From",
+        center: ["50%", "60%"],
         type: "pie",
-        radius: "30%",
+        radius: "60%",
         data: [
           { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
           { value: indexData.value.totalLoadTons, name: "装载吨位" },
@@ -396,6 +406,21 @@ function drawPie(type) {
             shadowColor: "rgba(0, 0, 0, 0.5)",
           },
         },
+        label: {
+          normal: {
+            show: true,
+            position: "inner", // 数值显示在内部
+            formatter: "{d}%", // 格式化数值百分比输出
+          },
+        },
+        lableLine: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: true,
+          },
+        },
       },
     ],
   };
@@ -623,9 +648,6 @@ onMounted(() => {
   border-bottom: 1px solid grey;
 }
 
-.cards {
-}
-
 .cards > div:first-child {
   font-size: 24px;
   padding-top: 12%;
@@ -635,7 +657,9 @@ onMounted(() => {
 .cards > div:last-child {
   font-size: 20px;
 }
-
+/* 
+.cards {
+}
 .card-1 {
 }
 .card-2 {
@@ -643,7 +667,7 @@ onMounted(() => {
 .card-3 {
 }
 .card-4 {
-}
+} */
 .card-5 {
   height: 280px;
 }