gx

src/view/echarts_hygiene/eP4.vue

@@ -3,17 +3,34 @@
 </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: {},
+});
 
-let option = {
+const getOption = () => {
+  data.option = {
     series: [
       // 外圈背景
       {
@@ -63,7 +80,7 @@ let option = {
         hoverAnimation: false,
         data: [
           {
-          value: datas.value,
+            value: data.list,
             label: {
               normal: {
                 position: "center",
@@ -111,7 +128,7 @@ let option = {
             },
           },
           {
-          value: 100 - datas.value,
+            value: 100 - data.list,
             name: "",
             itemStyle: {
               normal: {
@@ -131,50 +148,21 @@ let option = {
         ],
       },
     ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
 };
-// 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;