gx

src/view/dialog/echarts/jypxs copy.vue

@@ -0,0 +1,155 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 300px"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  month: [],
+  option: {},
+  color: [
+    "rgba(255, 252, 166, 1)",
+    "rgba(128, 229, 229, 1)",
+    "rgba(246, 255, 103, 1)",
+    "rgba(82, 174, 255, 1)",
+  ],
+});
+let datas = [
+  {
+    name: "高血压",
+    value: 200,
+  },
+  {
+    name: "糖尿病",
+    value: 230,
+  },
+  {
+    name: "其他疾病患者",
+    value: 198,
+  },
+  {
+    name: "无重大疾病患者",
+    value: 80,
+  },
+];
+const getOption = () => {
+  data.option = {
+    color: data.color,
+
+    title: {
+      // 圆环标题
+      // text: "就业率", // 主标题
+      textStyle: {
+        // 主标题样式
+        color: "#fff",
+        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,
+      icon: "rect",
+      orient: "vertical",
+      top: "center",
+      right: "16%",
+      itemGap: 20, // 垂直间距
+      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}:{d}",
+    },
+    calculable: true,
+    series: [
+      {
+        name: "",
+        type: "pie",
+        // radius: ["45%", "90%"],
+        // center: ["25%", "50%"],
+
+        roseType: "radiuas",
+        labelLine: {
+          normal: {
+            length: 30, // 改变标示线的长度
+            length2: 70,
+            lineStyle: {
+              color: "white", // 改变标示线的颜色
+            },
+          },
+        },
+        label: {
+          show: true,
+          formatter: "{b}:{c}" + "个\n\n",
+          borderWidth: 10,
+          borderRadius: 4,
+          fontSize: 16,
+          padding: [0, -80],
+        },
+        data: datas,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>

src/view/dialog/echarts/jypxs.vue

@@ -37,104 +37,60 @@ let datas = [
     value: 80,
   },
 ];
+const colorList = ["#ffd813", "#08daaa", "#6571fc"];
 const getOption = () => {
   data.option = {
-    color: data.color,
+    //标题
-
     title: {
-      // 圆环标题
+      // text: "近五年全省清洁能源发电及电能占比情况",
-      // text: "就业率", // 主标题
       textStyle: {
-        // 主标题样式
+        color: "#212b43",
-        color: "#fff",
+        fontSize: 14, //fontWeight: 'normal',
-
-        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,
+      bottom: "0;",
-      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}:{d}",
     },
-    calculable: true,
     series: [
       {
-        name: "",
         type: "pie",
-        // radius: ["45%", "90%"],
+        radius: [0, 100],
-        // center: ["25%", "50%"],
+        center: ["50%", "40%"],
 
-        roseType: "radiuas",
+        roseType: "area",
-        labelLine: {
+        itemStyle: {
-          normal: {
+          color: (params) => {
-            length: 30, // 改变标示线的长度
+            return colorList[params.dataIndex];
-            length2: 80,
+          },
-            lineStyle: {
+          borderRadius: 8,
-              color: "white", // 改变标示线的颜色
+        }, //标题与数字一行显示
+        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],
+            },
+            a: {
+              padding: [0, 1, -20, 15],
+              color: "auto",
             },
           },
         },
-        label: {
+        data: [
-          show: true,
+          { value: 200, name: "高血压" },
-          formatter: "{b}:{c}" + "个\n\n",
+          { value: 230, name: "糖尿病" },
-          borderWidth: 10,
+          { value: 198, name: "其他疾病患者" },
-          borderRadius: 4,
+          { value: 80, name: "无重大疾病患者" },
-          padding: [0, -80],
+        ],
-        },
-        data: datas,
       },
     ],
   };