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: "高血压",
@@ -37,60 +38,99 @@ let datas = [
     value: 80,
   },
 ];
-const colorList = ["#ffd813", "#08daaa", "#6571fc"];
 const getOption = () => {
   data.option = {
-    //标题
+    color: data.color,
+
     title: {
-      // text: "近五年全省清洁能源发电及电能占比情况",
+      // 圆环标题
+      // text: "就业率", // 主标题
       textStyle: {
-        color: "#212b43",
-        fontSize: 14, //fontWeight: 'normal',
+        // 主标题样式
+        color: "#fff",
+
+        fontSize: 16,
       },
-    }, //图例组件
+ 
+    },
+
     legend: {
-      bottom: "0;",
+      itemHeight: 10,
+      itemWidth: 25,
+      icon: "rect",
+      orient: "vertical",
+      top: "center",
+      right: "16%",
+      itemGap: 30, // 垂直间距
+      textStyle: {
+        align: "left",
+        color: "#ffffff",
+        verticalAlign: "middle",
+        rich: {
+          name: {
+            width: 80,
+            fontSize: 16,
+          },
+          value: {
+            width: 30,
+            align: "right",
+            fontFamily: "Medium",
+            fontSize: 16,
+          },
+          rate: {
+            width: 20,
+            align: "right",
+            fontSize: 16,
+          },
+        },
+      },
+      data: datas,
+      formatter: (name) => {
+        if (datas.length) {
+          const item = datas.filter((item) => item.name === name)[0];
+          return `{name|${name}}         {value| ${item.value}}`;
+        }
+      },
     },
     tooltip: {
       trigger: "item",
+      formatter: "{b}:{c}",
     },
     series: [
       {
-        type: "pie",
-        radius: [0, 100],
-        center: ["50%", "40%"],
+           type: 'pie',
+            radius: [0, 100],
+            center: ['50%', '40%'],
 
-        roseType: "area",
-        itemStyle: {
-          color: (params) => {
-            return colorList[params.dataIndex];
-          },
-          borderRadius: 8,
-        }, //标题与数字一行显示
-        label: {
-          show: true,
-          position: "outside",
-          formatter: "{a|{b}：{d}%}\n{hr|}",
-          rich: {
-            hr: {
-              backgroundColor: "auto",
-              borderRadius: 3,
-              width: 1,
-              height: 3,
-              padding: [3, 3, 0, -12],
+            roseType: 'area',
+            itemStyle: {
+                color: (params) => {
+                    return colorList[params.dataIndex];
+                },
+                borderRadius: 8,
             },
-            a: {
-              padding: [0, 1, -20, 15],
-              color: "auto",
+            //标题与数字一行显示
+            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: [
-          { value: 200, name: "高血压" },
-          { value: 230, name: "糖尿病" },
-          { value: 198, name: "其他疾病患者" },
-          { value: 80, name: "无重大疾病患者" },
-        ],
+     
+            data: datas,
       },
     ],
   };