gx

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "echarts": "^5.4.2",
         "echarts-gl": "^2.0.9",
+        "echarts-liquidfill": "^3.1.0",
         "sass": "^1.60.0",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -263,6 +264,14 @@
         "echarts": "^5.1.2"
       }
     },
+    "node_modules/echarts-liquidfill": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
+      "integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.14",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
     "sass": "^1.60.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

src/components/header.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="header">
-    <img class="title" src="../assets/img_07.png" alt="" />
+    <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
     <div class="time">
-      <div id="clock">加载中...</div>
       <div id="date-display"></div>
+      <div id="clock" style="margin-top: 4px;">加载中...</div>
     </div>
 
     <div class="header-menu">
-      <ul class="header-menu-item header-menu-left">
+      <div class="header-menu-item header-menu-left">
-        <li v-for="item in data.urlLeft.slice(0, 3)" :key="item.name">
+        <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 3)"
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
+          :key="item.name">
-        </li>
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
-      </ul>
+        </div>
-      <ul class="header-menu-item header-menu-right">
+      </div>
-        <li v-for="item in data.urlLeft.slice(3, 6)" :key="item.name">
+      <div class="header-menu-item header-menu-right">
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
+        <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(3, 6)"
-        </li>
+          :key="item.name">
-      </ul>
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -40,18 +42,18 @@ const updateClock = () => {
   //拼接时间字符串
   const timeString = `${hours}:${minutes}:${seconds}`;
 
-  const formattedDate = year + "-" + month + "-" + day;
+  const formattedDate = year + "/" + month + "/" + day;
 
   // 更新页面上的时钟显示
   document.getElementById("clock").textContent = timeString;
   // 将格式化后的日期更新到 div 中
   document.getElementById("date-display").innerText = formattedDate;
 };
-const to =(url)=>{
+const to = (url) => {
   router.push({
     path: `${url}`,
-
   });
+  data.nowTab = url
 }
 const router = useRouter();
 const routers = useRoute();
@@ -60,49 +62,52 @@ const data = reactive({
   urlLeft: [
     {
       name: "主页",
-      url:'/home/index',
+      url: '/home/index',
     },
     {
       name: "养老",
-      url:'/home/yl',
+      url: '/home/yl',
     },
     {
       name: "卫生",
-      url:'/home/hygiene',
+      url: '/home/hygiene',
     },
     {
       name: "教育",
-      url:'/home/education',
+      url: '/home/education',
     },
     {
       name: "就业救助",
-      url:'/home/work',
+      url: '/home/work',
     },
     {
       name: "智能分析",
-      url:'/home/analyze',
+      url: '/home/analyze',
     },
   ],
-  nowTab: "0",
+  nowTab: "/home/index",
 });
 
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
 
+  data.nowTab = router.currentRoute.value.fullPath
+
   // 每隔一秒钟调用一次 updateClock 以更新时钟显示
   setInterval(updateClock, 1000);
 });
 </script>
 <style lang='scss' scoped>
 .header {
-  //   background-image: url(../assets/header.png);
+  background-image: url(../assets/headerBg.png);
-  //   background-size: 100% 100%;
+  background-size: 100% 100%;
   display: flex;
-  height: 80px;
+  height: 112px;
   width: 100%;
-  background-color: beige;
+  // background-color: beige;
   position: relative;
+
   .title {
     position: absolute;
     left: 50%;
@@ -111,15 +116,19 @@ onMounted(() => {
     width: 146px;
     height: 55px;
   }
+
   .time {
     width: 200px;
-    height: 100%;
+    height: 70%;
     display: flex;
     padding-left: 20px;
     flex-direction: column;
+    color: #fff;
     // align-items: center;
     justify-content: center;
+    font-size: 18px;
   }
+
   &-menu {
     // position: absolute;
     // left:20%;
@@ -147,26 +156,66 @@ onMounted(() => {
     top: 0;
     display: flex;
     cursor: pointer;
+
     &-item {
       height: 80px;
-      width: 600px;
       display: flex;
       position: absolute;
-      justify-content: space-around;
+      align-items: center;
-      li {
-        display: inline-block;
-        margin: 0px;
-        height: 80px;
-        line-height: 80px;
-        text-align: center;
-        font-size: 30px;
-      }
     }
+
     &-left {
-      left: 10%;
+      left: 8%;
     }
+
     &-right {
-      left: 60%;
+      right: 8%;
+    }
+
+    .leftItem {
+      background-image: url(../assets/headLeft.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .leftItemC {
+      background-image: url(../assets/headLeftC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItem {
+      background-image: url(../assets/headRight.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItemC {
+      background-image: url(../assets/headRightC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .itemText {
+      width: 150px;
+      height: 62px;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 62px;
+      font-size: 18px;
+      color: #fff;
     }
   }
 }

src/view/echarts/waterBall.vue

@@ -0,0 +1,219 @@
+<template>
+    <div ref="chart" style="width: 50%; height: 160px"></div>
+  </template>
+  
+  <script setup>
+  import { onMounted, reactive, ref } from "vue";
+  // 局部引入echarts核心模块
+  import * as echarts from "echarts";
+  import "echarts-liquidfill";
+  
+  const chart = ref(); // 创建DOM引用
+
+  const liq = reactive({   //chart数据
+    value: 0.18,
+  })
+
+  const Pie = () => {
+    let dataArr = [];
+    for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+            dataArr.push({
+                name: (i + 1).toString(),
+                value: 50,
+                itemStyle: {
+                    normal: {
+                        color: '#00AFFF',
+                        borderWidth: 0,
+                        borderColor: 'rgba(0,0,0,0)',
+                    },
+                },
+            });
+        } else {
+            dataArr.push({
+                name: (i + 1).toString(),
+                value: 100,
+                itemStyle: {
+                    normal: {
+                        color: 'rgba(0,0,0,0)',
+                        borderWidth: 0,
+                        borderColor: 'rgba(0,0,0,0)',
+                    },
+                },
+            });
+        }
+    }
+    return dataArr;
+}
+  
+  let option = {
+    series: [
+        {
+            value: liq.value, //  内容 配合formatter
+            type: 'liquidFill',
+            radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ['50%', '50%'],
+            data: [
+            liq.value,
+                {
+                    value: liq.value,
+                    direction: 'left', //波浪方向
+                },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+                borderWidth: 1,
+                color: 'rgba(62, 208, 255, 1)', // 球体本景色
+            },
+            amplitude: '6  %', //波浪的振幅
+            // 修改波浪颜色
+            // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
+            color: [
+                {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 1,
+                            color: '#6CDEFC',
+                        },
+                        {
+                            offset: 0,
+                            color: '#429BF7',
+                        },
+                    ],
+                    globalCoord: false,
+                },
+            ],
+            label: {
+                normal: {
+                    // formatter: 0.87 * 100 + '\n%',
+                    // formatter: 0.6 * 100 + '{d|%}',
+                     formatter: function(params){
+                        return params.value * 100 + "%";
+                    },
+                    rich: {
+                        d: {
+                            fontSize: 20,
+                        },
+                    },
+                    textStyle: {
+                        fontSize: 20,
+                        color: '#fff',
+                    },
+                },
+            },
+            outline: {
+                show: false,
+            },
+        },
+        {
+            type: 'pie',
+            z: 1,
+            center: ['50%', '50%'],
+            radius: ['72%', '73.5%'], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+                {
+                    name: '',
+                    value: 500,
+                    labelLine: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        color: '#00AFFF',
+                    },
+                    emphasis: {
+                        labelLine: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            color: '#00AFFF',
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            //外发光
+            type: 'pie',
+            z: 1,
+            zlevel: -1,
+            radius: ['70%', '90.5%'],
+            center: ['50%', '50%'],
+            hoverAnimation: false,
+            clockWise: false,
+            itemStyle: {
+                normal: {
+                    borderWidth: 20,
+                    color: 'rgba(224,242,255,1)',
+                },
+            },
+            label: {
+                show: false,
+            },
+            data: [100],
+        },
+        // {
+        //     //底层外发光
+        //     type: 'pie',
+        //     z: 1,
+        //     zlevel: -2,
+        //     radius: ['70%', '100%'],
+        //     center: ['50%', '50%'],
+        //     hoverAnimation: false,
+        //     clockWise: false,
+        //     itemStyle: {
+        //         normal: {
+        //             borderWidth: 20,
+        //             color: 'rgba(224,242,255,.4)',
+        //         },
+        //     },
+        //     label: {
+        //         show: false,
+        //     },
+        //     data: [100],
+        // },
+        {
+            type: 'pie',
+            zlevel: 0,
+            silent: true,
+            radius: ['78%', '80%'],
+            z: 1,
+            label: {
+                normal: {
+                    show: false,
+                },
+            },
+            labelLine: {
+                normal: {
+                    show: false,
+                },
+            },
+            data: Pie(),
+        },
+    ],
+};
+  
+  // 使用生命钩子
+  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/home.vue

@@ -68,12 +68,11 @@ onBeforeMount(() => {
 
 <style scoped lang="scss">
 .content {
-  background-color: rgba(8, 35, 68, 1);
+  background-image: url("../assets/bgImg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   height: 100vh;
   width: 100vw;
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-  background-size: 100%;
   overflow: hidden;
 }
 

src/view/yl.vue

@@ -2,29 +2,39 @@
   <div class="module">
     <div class="displayFlex">
       <div class="flex1">
-        <div class="yd_title">
+        <div class="yd_title left_1">
-          <span class="text">助乡兴趣点</span>
+          <span class="text">
+            <img
+              src="@/assets/images/ylbx_1.png"
+              style="width: 130px; height: 30px"
+            />
+            <img
+              src="@/assets/images/ylbx_2.png"
+              style="width: 130px; height: 30px"
+            />
+          </span>
         </div>
         <ePie></ePie>
       </div>
       <div class="flex1">
-        <div class="yd_title">
+        <div class="yd_title left_3">
-          <span class="text">基本信息</span>
+          <!-- <span class="text">基本信息</span> -->
-        </div>
-        <eP2></eP2>
-      </div>
-      <div class="flex1">
-        <div class="yd_title">
-          <span class="text">基本信息</span>
         </div>
         <eP3></eP3>
       </div>
+      <div class="flex1">
+        <div class="yd_title left_3">
+          <!-- <span class="text">基本信息</span> -->
+        </div>
+        <eP2></eP2>
+      </div>
     </div>
     <div class="displayFlex">
       <div class="flex1">
         <div class="yd_title">
           <span class="text">活动数据分析</span>
         </div>
+        <waterBall></waterBall>
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
@@ -144,6 +154,7 @@ import eP3 from "./echarts/eP3.vue";
 import ePie2 from "./echarts/pie2.vue";
 import eGraph from "./echarts/graph.vue";
 import ePie3d from "./echarts/pie3d.vue";
+// import waterBall from "./echarts/waterBall.vue";
 import ylJHSY from "./echarts/ylJHSY.vue";
 import ylSMFW from "./echarts/ylSMFW.vue";
 import ylXZZC from "./echarts/ylXZZC.vue";
@@ -157,7 +168,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
 }
 .flex1 {
   flex: 1;
-  padding: 0 38px;
+  padding: 0 28px;
   box-sizing: border-box;
 }
 .flex2 {
@@ -170,20 +181,22 @@ import ylXZZC from "./echarts/ylXZZC.vue";
 }
 
 .yd_title {
-  background-image: url(@/assets/img_04.png);
+  // background-image: url(@/assets/img_04.png);
-  background-repeat: no-repeat;
+  // background-repeat: no-repeat;
-  background-size: 100% 100%;
+  // background-size: 100% 100%;
   box-sizing: border-box;
   width: 100%;
   height: 36px;
   position: relative;
   .text {
+    display: flex;
+    position: absolute;
     font-size: 16px;
     font-family: SourceHanSansCN;
     font-weight: bold;
     color: #ffffff;
     position: absolute;
-    left: 33px;
+    right: 33px;
     top: 3px;
   }
 }
@@ -246,6 +259,28 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   }
 }
 
+.left_1 {
+  background-image: url(@/assets/images/ylbx.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_2 {
+  background-image: url(@/assets/images/gllrbt.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_3 {
+  background-image: url(@/assets/images/tkjz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.text_1_left {
+  //   background-image: url(@/assets/images/ylbx_1.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  width: 100px;
+  height: 50px;
+}
 .basicInformation {
   display: flex;
   flex-direction: row;

yarn.lock

@@ -270,6 +270,11 @@ echarts-gl@^2.0.9:
     claygl "^1.2.1"
     zrender "^5.1.1"
 
+echarts-liquidfill@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz"
+  integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
+
 echarts@^5.4.2:
   version "5.4.2"
   resolved "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz"