gx

src/view/dialog/echarts/jypxs.vue

@@ -19,6 +19,7 @@ const data = reactive({
     "rgba(82, 174, 255, 1)",
   ],
 });
+const colorList = ['#ffd813', '#08daaa', '#6571fc','red'];
 let datas = [
   {
     name: "高血压",
@@ -50,23 +51,9 @@ const getOption = () => {
 
         fontSize: 16,
       },
-      // left: "24%", // 定位到适合的位置
-      // top: "38%", // 定位到适合的位置
-      // subtext: `100%`, // 副标题
-      // subtextStyle: {
-      //   // 副标题样式
-      //   color: "#00FFFB",
-      //   fontSize: 22,
-      //   fontWeight: "bold",
-      // },
-      // textAlign: "center", // 主、副标题水平居中显示
+ 
     },
-    // grid: {
-    //   top: "13%",
-    //   left: "1%",
-    //   right: "1%",
-    //   bottom: "0%",
-    // },
+
     legend: {
       itemHeight: 10,
       itemWidth: 25,
@@ -107,34 +94,43 @@ const getOption = () => {
     },
     tooltip: {
       trigger: "item",
-      formatter: "{b}:{d}",
+      formatter: "{b}:{c}",
     },
-    calculable: true,
     series: [
       {
-        name: "",
-        type: "pie",
-        // radius: ["45%", "90%"],
-        // center: ["25%", "50%"],
+           type: 'pie',
+            radius: [0, 100],
+            center: ['50%', '40%'],
 
-        roseType: "radiuas",
-        labelLine: {
-          normal: {
-            length: 30, // 改变标示线的长度
-            length2: 80,
-            lineStyle: {
-              color: "white", // 改变标示线的颜色
+            roseType: 'area',
+            itemStyle: {
+                color: (params) => {
+                    return colorList[params.dataIndex];
+                },
+                borderRadius: 8,
             },
-          },
-        },
-        label: {
-          show: true,
-          formatter: "{b}:{c}" + "个\n\n",
-          borderWidth: 10,
-          borderRadius: 4,
-          padding: [0, -80],
-        },
-        data: datas,
+            //标题与数字一行显示
+            label: {
+                show: true,
+                position: 'outside',
+                formatter: '{a|{b}：{c}}\n{hr|}',
+                rich: {
+                    hr: {
+        
+                        backgroundColor: 'auto',
+                        borderRadius: 3,
+                        width: 3,
+                        height: 3,
+                        padding: [3, 3, 0, -12],
+                    },
+                    a: {
+                        padding: [-30, 15, -20, 15],
+                        color: 'auto',
+                    },
+                },
+            },
+     
+            data: datas,
       },
     ],
   };