gx

src/view/echarts_hygiene/eP4.vue

@@ -3,178 +3,166 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(); // 创建DOM引用
 
-const datas = {
+const data = reactive({
-  value: 92.96,
+  list: 60,
+  option: {},
+});
+
+const getOption = () => {
+  data.option = {
+    series: [
+      // 外圈背景
+      {
+        type: "pie",
+        center: ["55%", "55%"],
+        radius: ["70%", "90%"],
+        hoverAnimation: false,
+        clockWise: false,
+        //   startAngle: 180,
+        //   endAngle: 360,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(193, 229, 255, .1)",
+            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+              {
+                offset: 1,
+                color: "rgba(127, 242, 255, .2)",
+              },
+              {
+                offset: 0,
+                color: "rgba(109, 195, 255, 0)",
+              },
+            ]),
+          },
+        },
+        tooltip: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        data: [100],
+      },
+      /*内心原型图，展示整体数据概览*/
+      {
+        //   name: "pie",
+        type: "pie",
+        roundCap: true,
+        clockWise: true,
+        radius: ["50%", "70%"],
+        center: ["55%", "55%"],
+        startAngle: 180,
+        labelLine: {
+          show: false,
+        },
+        hoverAnimation: false,
+        data: [
+          {
+            value: data.list,
+            label: {
+              normal: {
+                position: "center",
+                show: true,
+                textStyle: {
+                  fontSize: "24",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  fontSize: 16,
+                  lineHeight: 30,
+                  rich: {
+                    cell: {
+                      fontSize: "24",
+                      fontWeight: "normal",
+                      color: "#fff",
+                    },
+                    text: {
+                      fontSize: 16,
+                      fontFamily: "FZLanTingHeiS-L-GB",
+                      color: "#fff",
+                    },
+                  },
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 255, 250, 0.29)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(0, 255, 250, 0.8)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 255, 250, 1)",
+                  },
+                ]),
+                shadowColor: "rgba(1,1,1,0.5)",
+                shadowBlur: 1,
+              },
+            },
+          },
+          {
+            value: 100 - data.list,
+            name: "",
+            itemStyle: {
+              normal: {
+                color: "#095b9b", // 未完成的圆环的颜色
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+              emphasis: {
+                color: "#095b9b", // 未完成的圆环的颜色
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
 };
 
-let option = {
+const setChart = () => {
-  series: [
+  var myChart = echarts.init(chart.value);
-    // 外圈背景
+  myChart.setOption(data.option);
-    {
-      type: "pie",
-      center: ["55%", "55%"],
-      radius: ["70%", "90%"],
-      hoverAnimation: false,
-      clockWise: false,
-    //   startAngle: 180,
-    //   endAngle: 360,
-      itemStyle: {
-        normal: {
-          borderWidth: 1,
-          borderColor: "rgba(193, 229, 255, .1)",
-          color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
-            {
-              offset: 1,
-              color: "rgba(127, 242, 255, .2)",
-            },
-            {
-              offset: 0,
-              color: "rgba(109, 195, 255, 0)",
-            },
-          ]),
-        },
-      },
-      tooltip: {
-        show: false,
-      },
-      label: {
-        show: false,
-      },
-      data: [100],
-    },
-    /*内心原型图，展示整体数据概览*/
-    {
-    //   name: "pie",
-      type: "pie",
-      roundCap: true,
-      clockWise: true,
-      radius: ["50%", "70%"],
-      center: ["55%", "55%"],
-      startAngle: 180,
-      labelLine: {
-        show: false,
-      },
-      hoverAnimation: false,
-      data: [
-        {
-          value: datas.value,
-          label: {
-            normal: {
-              position: "center",
-              show: true,
-              textStyle: {
-                fontSize: "24",
-                fontWeight: "normal",
-                color: "#fff",
-                fontSize: 16,
-                lineHeight: 30,
-                rich: {
-                  cell: {
-                    fontSize: "24",
-                    fontWeight: "normal",
-                    color: "#fff",
-                  },
-                  text: {
-                    fontSize: 16,
-                    fontFamily: "FZLanTingHeiS-L-GB",
-                    color: "#fff",
-                  },
-                },
-              },
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-                {
-                  offset: 0,
-                  color: "rgba(0, 255, 250, 0.29)",
-                },
-                {
-                  offset: 0.5,
-                  color: "rgba(0, 255, 250, 0.8)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(0, 255, 250, 1)",
-                },
-              ]),
-              shadowColor: "rgba(1,1,1,0.5)",
-              shadowBlur: 1,
-            },
-          },
-        },
-        {
-          value: 100 - datas.value,
-          name: "",
-          itemStyle: {
-            normal: {
-              color: "#095b9b", // 未完成的圆环的颜色
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false,
-              },
-            },
-            emphasis: {
-              color: "#095b9b", // 未完成的圆环的颜色
-            },
-          },
-        },
-      ],
-    },
-  ],
 };
-// let option = {
-//   tooltip: {
-//     trigger: 'item'
-//   },
-//   legend: {
-//     top: '5%',
-//     left: 'center'
-//   },
-//   series: [
-//     {
-//       name: 'Access From',
-//       type: 'pie',
-//       radius: ['40%', '70%'],
-//       center: ['50%', '70%'],
-//       // adjust the start and end angle
-//       startAngle: 180,
-//       endAngle: 360,
-//       data: [
-//         { value: 1048, name: 'Search Engine' },
-//         { value: 735, name: 'Direct' },
-//         { value: 580, name: 'Email' },
-//         { value: 484, name: 'Union Ads' },
-//         { value: 300, name: 'Video Ads' }
-//       ]
-//     }
-//   ]
-// };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-  // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-  // Vue3中： 需要引入
+    getOption();
-  var myChart = echarts.init(chart.value);
+    setChart();
-
+  }, 600);
-  // init(); // vue3.2没有this
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
 </script>
 

src/view/echarts_hygiene/eP4_1.vue

@@ -3,17 +3,39 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(); // 创建DOM引用
 
-const datas = {
-    value: 62.16,
-}
 
-let option = {
+
+const data = reactive({
+  list: 60,
+  option: {},
+  initialLegendData: ["特困救助金额", "低保救助金额"],
+  initialLegendData1: ["特困救助人次", "低保救助人次", "低边救助人次"],
+});
+
+const getOption = () => {
+    data.option = {
     series: [
         // 外圈背景
         {
@@ -61,7 +83,7 @@ let option = {
             center: ['55%', '55%'],
             data: [
                 {
-                    value: datas.value,
+                    value: data.list,
                     label: {
                         normal: {
                             
@@ -102,7 +124,7 @@ let option = {
                     }
                 },
                 {
-                    value: 100 - datas.value,
+                    value: 100 - data.list,
                     name: '',
                     itemStyle: {
                         normal: {
@@ -122,22 +144,20 @@ let option = {
         }
     ]
 };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-    // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-    // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-    // Vue3中： 需要引入
+    getOption();
-    var myChart = echarts.init(chart.value);
+    setChart();
-
+  }, 600);
-    // init(); // vue3.2没有this
-    // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
-
-    // 单图表响应式: 跟随浏览器大小改变
-    //   window.addEventListener("resize", () => {
-    //     myChart.resize();
-    //   });
 });
 </script>
 

src/view/hygiene.vue

@@ -123,7 +123,7 @@
         <div class="minTop">
           <div class="minTopPart">
             <div class="history2">
-              <div class="va">33.67万</div>
+              <div class="va">{{data.jkda.jdfs}}</div>
               <img
                 src="@/assets/images/hygiene/shang_left.png"
                 alt=""
@@ -144,20 +144,20 @@
           <div class="minTopPart2">
             <div class="left">
               <div class="leftImg">
-                <eP4></eP4>
+                <eP4 :list="data.jkda.jdl"></eP4>
               </div>
               <div class="left_me">
                 <div>建档率</div>
-                <div class="bo">92.96%</div>
+                <div class="bo">{{data.jkda.jdl}}%</div>
               </div>
             </div>
             <div class="right">
               <div class="rightImg">
-                <eP4_1></eP4_1>
+                <eP4_1 :list="data.jkda.jtysqyl"></eP4_1>
               </div>
               <div class="right_me">
                 <div>家庭医生签约率</div>
-                <div class="bo">62.16%</div>
+                <div class="bo">{{data.jkda.jtysqyl}}%</div>
               </div>
             </div>
           </div>
@@ -345,7 +345,7 @@ const getData = async () => {
       data.medicalInsurance = res.data.medicalInsurance;
       data.lmb = res.data.lmb;
       data.mz = res.data.mz;
-      // data.jkda = res.data.jkda;
+      data.jkda = res.data.jkda;
       data.jsbgl = res.data.jsbgl;
       data.fyglrs = res.data.fyglrs;
       data.jktj = res.data.jktj;