gx

src/view/analyze.vue

@@ -200,6 +200,7 @@ import DialogMap from "./dialog/dialogMap.vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import jypx from "./echart_analyze/jypx.vue";
+
 import http from "@/utils/request.js";
 import Pie3dMt from "./echart_analyze/pie3dMt.vue";
 import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";

src/view/dialog/diaLogElderlyData.vue

@@ -82,9 +82,7 @@
           <div
             style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
           >
-            <eP5
+            <eP5 :list="data.selectList1"></eP5>
-              :list="data.selectList1"
-            ></eP5>
             <!-- <pick2
               :list1="data.selectList1"
               :year="data.dataElderly.schoolYear"
@@ -100,11 +98,12 @@
           <div
             style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
           >
-            <pick1
+            <jypxs></jypxs>
+            <!-- <pick1
               :list1="data.selectList1"
               :list2="data.selectList2"
               :year="data.dataElderly.schoolYear"
-            ></pick1>
+            ></pick1> -->
           </div>
         </div>
       </div>
@@ -127,6 +126,7 @@ import zsbm from "./echarts/echartZsbm.vue";
 import pick1 from "./echarts/echartPick1.vue";
 import pick2 from "./echarts/echartPick2.vue";
 import eP5 from "./echarts/eP5.vue";
+import jypxs from "./echarts/jypxs.vue";
 const props = defineProps({
   dialogShowElderly: {
     type: Boolean,

src/view/dialog/echarts/jypxs.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: 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%"],
+        // center: ["25%", "50%"],
+
+        roseType: "radiuas",
+        labelLine: {
+          normal: {
+            length: 30, // 改变标示线的长度
+            length2: 80,
+            lineStyle: {
+              color: "white", // 改变标示线的颜色
+            },
+          },
+        },
+        label: {
+          show: true,
+          formatter: "{b}:{c}" + "个\n\n",
+          borderWidth: 10,
+          borderRadius: 4,
+          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>