From c5296e984c52baca99341c0d6aff29c4647790e9 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Wed, 17 Apr 2024 15:25:25 +0800
Subject: [PATCH] 1

---
 src/view/echarts_hygiene/eP3.vue |  88 +++++++++++++++---
 src/view/echarts_hygiene/eP4.vue | 149 +++++++++++++++++++++++++++++++
 src/view/echarts_hygiene/eP5.vue |  25 +++---
 src/view/echarts_hygiene/eP7.vue |  89 +++++++++++++++---
 src/view/hygiene.vue             |  53 ++++++-----
 5 files changed, 339 insertions(+), 65 deletions(-)
 create mode 100644 src/view/echarts_hygiene/eP4.vue

diff --git a/src/view/echarts_hygiene/eP3.vue b/src/view/echarts_hygiene/eP3.vue
index cacab81..7a3ebd5 100644
--- a/src/view/echarts_hygiene/eP3.vue
+++ b/src/view/echarts_hygiene/eP3.vue
@@ -90,28 +90,94 @@ let option = {
         },
       },
     },
-
   ],
   series: [
     {
       name: "职工医疗保险发放人次",
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      data: [2.0, 4.9, 7.0, 23.2, 25.6,7,8],
       barWidth: 20,
       itemStyle: {
         normal: {
           color: function (params) {
             let colorList = [
-              "#FA897B",
-              "#FFDD94",
-              "#D0E6A5",
-              "#FFDD94",
-              "#4675C0",
-              "#B8BFD6",
-              "#FFA876",
+              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
+              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
+              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
             ];
-            let colorItem = colorList[params.dataIndex];
-            return colorItem;
+            if (params.dataIndex == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(23, 237, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23, 237, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else if (params.dataIndex % 3 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(23, 237, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23, 237, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else if (params.dataIndex % 2 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(255, 243, 119, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(255, 242, 142, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(142, 187, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(142, 187, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            }
           },
         },
       },
diff --git a/src/view/echarts_hygiene/eP4.vue b/src/view/echarts_hygiene/eP4.vue
new file mode 100644
index 0000000..83250eb
--- /dev/null
+++ b/src/view/echarts_hygiene/eP4.vue
@@ -0,0 +1,149 @@
+<template>
+    <div ref="chart" style="width: 100%; height:100%;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+    value: 92.96,
+    text: "留 守 儿 童"
+}
+
+let option = {
+    series: [
+        // 外圈背景
+        {
+            type: "pie",
+            center: ["60%", "55%"],
+            radius: ["50%", "82%"],
+            hoverAnimation: false,
+            clockWise: false,
+            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,
+            startAngle: 180,
+            labelLine: {
+                show: false
+            },
+            radius: ['50%', '70%'],
+            hoverAnimation: false,
+            center: ['60%', '55%'],
+            data: [
+                {
+                    value: datas.value,
+                    label: {
+                        normal: {
+                            
+                            position: 'center',
+                            show: true,
+                            textStyle: {
+                                fontSize: '24',
+                                fontWeight: 'normal',
+                                color: '#fff',
+                                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' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+onMounted(() => {
+    // 基于准备好的dom，初始化echarts实例
+    // var myChart = echarts.init(document.getElementById('main'));
+    // Vue3中： 需要引入
+    var myChart = echarts.init(chart.value);
+
+    // init(); // vue3.2没有this
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+
+    // 单图表响应式: 跟随浏览器大小改变
+    //   window.addEventListener("resize", () => {
+    //     myChart.resize();
+    //   });
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue
index 1564dea..7540f39 100644
--- a/src/view/echarts_hygiene/eP5.vue
+++ b/src/view/echarts_hygiene/eP5.vue
@@ -108,22 +108,17 @@ let option = {
       type: "bar",
       data: [2.0, 4.9, 7.0, 23.2, 25.6],
       barWidth: 20,
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            let colorList = [
-              "#FA897B",
-              "#FFDD94",
-              "#D0E6A5",
-              "#FFDD94",
-              "#4675C0",
-              "#B8BFD6",
-              "#FFA876",
-            ];
-            let colorItem = colorList[params.dataIndex];
-            return colorItem;
+    itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 237, 255, 1)",
           },
-        },
+          {
+            offset: 1,
+            color: "rgba(23, 237, 255, 0.20)",
+          },
+        ]),
       },
     },
   ],
diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue
index 9292916..baad6cf 100644
--- a/src/view/echarts_hygiene/eP7.vue
+++ b/src/view/echarts_hygiene/eP7.vue
@@ -96,22 +96,89 @@ let option = {
     {
       name: "职工医疗保险发放人次",
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      data: [2.0, 4.9, 7.0, 23.2, 25.6,9,9],
       barWidth: 20,
-      itemStyle: {
+       itemStyle: {
         normal: {
           color: function (params) {
             let colorList = [
-              "#FA897B",
-              "#FFDD94",
-              "#D0E6A5",
-              "#FFDD94",
-              "#4675C0",
-              "#B8BFD6",
-              "#FFA876",
+              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
+              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
+              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
             ];
-            let colorItem = colorList[params.dataIndex];
-            return colorItem;
+            if (params.dataIndex == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(23, 237, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23, 237, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else if (params.dataIndex % 3 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(23, 237, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23, 237, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else if (params.dataIndex % 2 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(255, 243, 119, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(255, 242, 142, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(142, 187, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(142, 187, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            }
           },
         },
       },
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index e2125bf..f954aeb 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -50,7 +50,8 @@
         </div>
         <div class="minTopPart2">
           <div class="left">
-            <div class="leftImg"></div>
+            <div class="leftImg"><eP4></eP4></div>
+            
             <div class="left_me">
               <div>建档率</div>
               <div>92.96%</div>
@@ -74,23 +75,22 @@
       </div>
     </div>
     <div class="displayFlex right_bg">
-      <div class="flex1" style="flex: 0.9">
+      <div class="flex1" style="flex:0.9">
         <div class="yd_title mechanism"></div>
         <eP6></eP6>
       </div>
-      <div class="flex1" style="flex:0.5">
+      <div class="flex1" style="flex:1.1;">
         <div class="yd_title service"></div>
         <eP7></eP7>
       </div>
-      <div class="flex1" style="flex:0.5">
+      <div >
         <div class="yd_title last"></div>
         <div class="table">
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
-          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
         </div>
       </div>
     </div>
@@ -105,8 +105,7 @@ import eP3 from "./echarts_hygiene/eP3.vue";
 import eP7 from "./echarts_hygiene/eP7.vue";
 import eP6 from "./echarts_hygiene/eP6.vue";
 import eP5 from "./echarts_hygiene/eP5.vue";
-import ylSMFW from "./echarts_yl/ylSMFW.vue";
-import ylXZZC from "./echarts_yl/ylXZZC.vue";
+import eP4 from "./echarts_hygiene/eP4.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
 const leftchoose = ref({
   first: "1",
@@ -618,12 +617,10 @@ const change = (name, index) => {
     align-items: center;
     justify-content: center;
     margin-left: 60px;
+    margin-top: -10px;
     .leftImg {
-      width: 81px;
-      height: 81px;
-      background-image: url(@/assets/images/hygiene/xia_right.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      width: 105px;
+      height: 105px;
     }
     .left_me {
       margin-left: 10px;
@@ -636,7 +633,7 @@ const change = (name, index) => {
     display: flex;
     align-items: center;
     // justify-content: center;
-    margin-left: 60px;
+    margin-left: 40px;
     .rightImg {
       width: 81px;
       height: 81px;
@@ -654,17 +651,17 @@ const change = (name, index) => {
 }
 .table {
   width: 95%;
-  min-height: 200px;
+  height: 200px;
   height: calc(100% - 75px);
-  background: red;
+  // background: red;
   overflow-y: auto;
-  // .item {
-  //   margin-top: 10px;
-  //   padding: 16px 20px;
-  //   background-image: url(@/assets/images/hygiene/table_bg.png);
-  //   background-repeat: no-repeat;
-  //   background-size: 100% 100%;
-  //   color: #ffffff;
-  // }
+  .item {
+    margin-top: 10px;
+    padding: 16px 20px;
+    background-image: url(@/assets/images/hygiene/table_bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #ffffff;
+  }
 }
 </style>