1

src/view/echarts_sy/pie.vue

@@ -90,8 +90,15 @@ let option = {
     {
       orient: "vertical",
       right: "10%",
-      top: "20%",
-      itemGap: 15,
+      top: "10%",
+      itemWidth: 25, // 可以设置图例标记的宽度
+      itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
+      itemGap: 20,
+      itemStyle: {
+        borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
+        borderWidth: 8, // 图例边框宽度
+        borderRadius:20,
+      },
       textStyle: {
         color: "#ccc",
         fontSize: 12,
@@ -113,7 +120,7 @@ let option = {
   ],
   tooltip: {
     trigger: "item",
-    
+
     formatter(params) {
       let res = "";
       const { marker, name, value } = params;
@@ -144,6 +151,16 @@ let option = {
       },
       labelLine: {
         show: false,
+      },
+       labelLine: {
+        show: true,
+        lineStyle: {
+          width: 3,
+        },
+        normal: {
+          length: 30, // 指示线长度
+          length2: 30
+        },
       },
       itemStyle: {
         normal: {
@@ -152,6 +169,7 @@ let option = {
           },
         },
       },
+      
       z: 3,
       data: optionData,
     },

src/view/echarts_sy/pie2.vue

@@ -8,11 +8,19 @@ import { onMounted, reactive, ref } from "vue";
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
-
+const data = [[140], [260], [330], [270]];
+const total = ref(0);
+const totalMax=ref(0);
+const lb=ref(0)
+data.forEach((item) => {
+  console.log(item[0]);
+  total.value += item[0];
+});
+totalMax.value=total.value*1.06;
+lb.value=Math.trunc(total.value*0.03);
 const option = {
   legend: {
     show: true,
-
     itemHeight: 12,
     itemWidth: 30,
     textStyle: {
@@ -27,8 +35,8 @@ const option = {
   },
   grid: { left: "2%", right: "2%", top: "10%" },
   xAxis: [
-    { type: "value", show: false, max: 106 },
-    { type: "value", show: false, max: 106 },
+    { type: "value", show: false, max: totalMax.value },
+    { type: "value", show: false, max: totalMax.value },
   ],
   yAxis: [
     {
@@ -49,7 +57,7 @@ const option = {
   series: [
     {
       type: "bar",
-      data: [3],
+      data: [lb.value],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -61,7 +69,7 @@ const option = {
     {
       type: "bar",
       name: "17岁以下",
-      data: [14],
+      data: data[0],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -83,7 +91,7 @@ const option = {
         normal: {
           show: true,
           position: ["25%", "-60%"],
-          formatter: "{c}%",
+          formatter: `${Math.trunc(data[0][0]*100/total.value)}%`,
           color: "#fff",
           fontSize: 22,
           fontWeight: 600,
@@ -93,7 +101,7 @@ const option = {
     {
       type: "bar",
       name: "18-34岁",
-      data: [26],
+      data: data[1],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -115,7 +123,7 @@ const option = {
         normal: {
           show: true,
           position: ["35%", "-60%"],
-          formatter: "{c}%",
+          formatter: `${Math.trunc(data[1][0]*100/total.value)}%`,
           color: "#fff",
           fontSize: 22,
           fontWeight: 600,
@@ -125,7 +133,7 @@ const option = {
     {
       type: "bar",
       name: "35-69岁",
-      data: [33],
+      data: data[2],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -147,7 +155,7 @@ const option = {
         normal: {
           show: true,
           position: ["35%", "-60%"],
-          formatter: "{c}%",
+           formatter: `${Math.trunc(data[2][0]*100/total.value)}%`,
           color: "#fff",
           fontSize: 22,
           fontWeight: 600,
@@ -157,7 +165,7 @@ const option = {
     {
       type: "bar",
       name: "60岁以上",
-      data: [27],
+      data: data[3],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -179,16 +187,16 @@ const option = {
         normal: {
           show: true,
           position: ["35%", "-60%"],
-          formatter: "{c}%",
+           formatter: `${Math.trunc(data[3][0]*100/total.value)}%`,
           color: "#fff",
           fontSize: 22,
           fontWeight: 600,
         },
       },
     },
-        {
+    {
       type: "bar",
-      data: [3],
+      data: [lb.value],
       stack: "income",
       barWidth: 18,
       itemStyle: {
@@ -205,7 +213,7 @@ const option = {
         color: "rgba(255,255,255,0.1)",
         barBorderRadius: [100, 100, 100, 100],
       },
-      data: ["2019"].map(() => 106),
+      data: ["2019"].map(() => totalMax.value),
       barWidth: 50,
     },
   ],

src/view/sy.vue

@@ -448,7 +448,7 @@ const tysyList = ref([
   },
   {
     name: "绿色跑道",
-    value: "100",
+    value: "100km",
     img: running,
   },
 ]);