gx

src/view/echarts_hygiene/eP4.vue

@@ -18,8 +18,8 @@ let option = {
         // 外圈背景
         {
             type: "pie",
-            center: ["60%", "55%"],
+            center: ["55%", "55%"],
-            radius: ["50%", "82%"],
+            radius: ["70%", "90%"],
             hoverAnimation: false,
             clockWise: false,
             itemStyle: {
@@ -58,7 +58,7 @@ let option = {
             },
             radius: ['50%', '70%'],
             hoverAnimation: false,
-            center: ['60%', '55%'],
+            center: ['55%', '55%'],
             data: [
                 {
                     value: datas.value,

src/view/echarts_hygiene/eP4_1.vue

@@ -0,0 +1,144 @@
+<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: 62.16,
+}
+
+let option = {
+    series: [
+        // 外圈背景
+        {
+            type: "pie",
+            center: ["55%", "55%"],
+            radius: ["70%", "90%"],
+            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: ['55%', '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(255, 224, 0, 0.29)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(255, 224, 0, 1)'
+                            }]),
+                            shadowColor: 'rgba(1,1,1,0.5)',
+                            shadowBlur: 1
+                        }
+                    }
+                },
+                {
+                    value: 100 - datas.value,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            color: 'rgba(255, 224, 0, 0.1)', // 未完成的圆环的颜色
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        },
+                        emphasis: {
+                            color: 'rgba(255, 224, 0, 0.1)' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+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>

src/view/hygiene.vue

@@ -79,14 +79,14 @@
               <div class="leftImg"><eP4></eP4></div>
               <div class="left_me">
                 <div>建档率</div>
-                <div style="margin-top: 5px">92.96%</div>
+                <div class="bo">92.96%</div>
               </div>
             </div>
             <div class="right">
-              <div class="rightImg"></div>
+              <div class="rightImg"><eP4_1></eP4_1></div>
               <div class="right_me">
-                <div>家庭医生</div>
+                <div>家庭医生签约率</div>
-                <div style="margin-top: 5px">2000</div>
+                <div class="bo">62.16%</div>
               </div>
             </div>
           </div>
@@ -141,6 +141,7 @@ import eP7 from "./echarts_hygiene/eP7.vue";
 import eP6 from "./echarts_hygiene/eP6.vue";
 import eP5 from "./echarts_hygiene/eP5.vue";
 import eP4 from "./echarts_hygiene/eP4.vue";
+import eP4_1 from "./echarts_hygiene/eP4_1.vue";
 import tnb from "./echarts_hygiene/tnb.vue";
 import gxy from "./echarts_hygiene/gxy.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
@@ -209,6 +210,7 @@ const change = (name, index) => {
 }
 
 .familyPlanning {
+  width: 96%;
   background-image: url(@/assets/images/hygiene/center_title_2.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -311,11 +313,13 @@ const change = (name, index) => {
 }
 
 .center_1 {
+  width: 96%;
   background-image: url(@/assets/images/hygiene/center_title_1.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
 .center_2 {
+  width: 96%;
   background-image: url(@/assets/images/hygiene/new_center.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -545,48 +549,7 @@ const change = (name, index) => {
     border-bottom: 13px solid rgba(57, 59, 109, 1);
   }
 }
-.history2 {
-  font-size: 26px;
-  color: #ffffff;
-  line-height: 30px;
-  letter-spacing: 1px;
-  text-align: center;
-  font-style: normal;
-  font-family: PangMenZhengDao;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .va {
-    margin-top: 27px;
-    margin-bottom: 20px;
-    font-family: DINAlternate, DINAlternate;
-
-    font-size: 26px;
-    color: #ffffff;
-    line-height: 30px;
-    letter-spacing: 1px;
-    text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
-    text-align: right;
-    font-style: normal;
-  }
-  img {
-    width: 113px;
-    height: 121px;
-  }
-
-  .historyimg {
-    margin-top: 10px;
-    padding: 0 25px;
-    background-image: url(@/assets/images/hygiene/xtgl_1.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    font-size: 15px;
-    color: #ffffff;
-    line-height: 21px;
-    letter-spacing: 2px;
-  }
-}
 .concernLabel {
   display: flex;
   align-items: center;
@@ -705,11 +668,54 @@ const change = (name, index) => {
   height: 250px;
   display: flex;
   align-items: center;
-  justify-content: space-around;
+}
+.history2 {
+  font-size: 26px;
+  color: #ffffff;
+  line-height: 30px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  font-family: PangMenZhengDao;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .va {
+    margin-top: 27px;
+    margin-bottom: 20px;
+
+    font-family: DINAlternate, DINAlternate;
+    font-weight: bold;
+    font-size: 20px;
+    color: #ffffff;
+    line-height: 24px;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 23px rgba(0, 252, 255, 0.5);
+    text-align: center;
+    font-style: normal;
+  }
+  img {
+    width: 113px;
+    height: 121px;
+  }
+
+  .historyimg {
+    margin-top: 10px;
+    padding: 0 25px;
+    background-image: url(@/assets/images/hygiene/xtgl_1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 15px;
+    color: #ffffff;
+    line-height: 21px;
+    letter-spacing: 2px;
+  }
 }
 .minTopPart2 {
-  width: 368px;
+  margin-left: 5px;
-  height: 145px;
+  width: 420px;
+  height: 136px;
   background-image: url(@/assets/images/hygiene/xia_1.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -717,50 +723,69 @@ const change = (name, index) => {
   position: relative;
   display: flex;
   margin-top: 35px;
+  padding: 0 5px;
+  box-sizing: border-box;
   .left {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 10px;
+    margin-left: 13px;
-    margin-top: -10px;
     .leftImg {
-      width: 100px;
+      width: 90px;
-      height: 100px;
+      height: 90px;
     }
     .left_me {
       margin-left: 10px;
       display: flex;
       flex-direction: column;
-
+      font-family: PingFangSC, PingFang SC;
       font-weight: 500;
-      font-size: 16px;
+      font-size: 14px;
       color: #ffffff;
-      line-height: 22px;
+      line-height: 20px;
       letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+
+      .bo {
+        margin-top: 5px;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 18px;
+        color: #00fffc;
+        line-height: 21px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+      }
     }
   }
   .right {
     display: flex;
     align-items: center;
     // justify-content: center;
-    margin-left: 10px;
+
     .rightImg {
-      width: 78px;
+      width: 90px;
-      height: 78px;
+      height: 90px;
-      background-image: url(@/assets/images/hygiene/xia_right.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
     }
     .right_me {
       margin-left: 10px;
       display: flex;
       flex-direction: column;
-
+      font-family: PingFangSC, PingFang SC;
       font-weight: 500;
-      font-size: 16px;
+      font-size: 14px;
       color: #ffffff;
-      line-height: 22px;
+      line-height: 20px;
       letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+      .bo {
+        margin-top: 5px;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 18px;
+        color: #ffe92c;
+        line-height: 21px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+      }
     }
   }
 }