Merge branch 'main' of git.zdool.com:xs/ggfwjsc

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/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,7 +68,9 @@ 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;

src/view/yl.vue

@@ -4,30 +4,37 @@
       <div class="flex1">
         <div class="yd_title left_1">
           <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"/>
+            <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 left_2">
-          <!-- <span class="text">基本信息</span> -->
-        </div>
-        <eP2></eP2>
-      </div>
       <div class="flex1">
         <div class="yd_title left_3">
           <!-- <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">
@@ -68,7 +75,7 @@
     <div class="displayFlex">
       <div class="flex1">
         <div class="yd_title">
-          <span class="text">个人经历</span>
+          <span class="text">养老机构</span>
         </div>
         <div class="history">
           <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
@@ -81,7 +88,7 @@
       </div>
       <div class="flex1">
         <div class="yd_title">
-          <span class="text">职位</span>
+          <span class="text">助老服务</span>
         </div>
         <eBubble></eBubble>
       </div>
@@ -97,6 +104,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";
 </script>
 
 <style lang="scss" scoped>
@@ -138,7 +146,6 @@ import ePie3d from "./echarts/pie3d.vue";
   background-image: url(@/assets/images/ylbx.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  
 }
 .left_2 {
   background-image: url(@/assets/images/gllrbt.png);
@@ -150,7 +157,7 @@ import ePie3d from "./echarts/pie3d.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.text_1_left{
+.text_1_left {
   //   background-image: url(@/assets/images/ylbx_1.png);
   // background-repeat: no-repeat;
   // background-size: 100% 100%;

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"