diff --git a/package-lock.json b/package-lock.json
index 3ed0d12..fdcfcdf 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 64e9617..b3f471e 100644
--- a/package.json
+++ b/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"
diff --git a/src/assets/bgImg.png b/src/assets/bgImg.png
new file mode 100644
index 0000000..33dc433
Binary files /dev/null and b/src/assets/bgImg.png differ
diff --git a/src/view/echarts/waterBall.vue b/src/view/echarts/waterBall.vue
new file mode 100644
index 0000000..3cd721c
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/view/home.vue b/src/view/home.vue
index 9daa86e..c55b8cb 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -41,7 +41,9 @@ onBeforeMount(() => {
 
 <style scoped lang="scss">
 .content {
-  background-color: rgba(2, 4, 27, 1);
+  background-image: url("../assets/bgImg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   height: 100vh;
   width: 100vw;
   background-repeat: no-repeat;
diff --git a/src/view/yl.vue b/src/view/yl.vue
index bbaadee..22a44ae 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -75,6 +75,7 @@
           <div class="yd_title">
             <span class="text">活动数据分析</span>
           </div>
+          <waterBall></waterBall>
           <ePie3d></ePie3d>
         </div>
         <div class="flex1">
@@ -222,6 +223,7 @@ import ePie from "./echarts/pie.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>
diff --git a/yarn.lock b/yarn.lock
index 6b96a50..1ddd508 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -165,7 +165,12 @@ echarts-gl@^2.0.9:
     claygl "^1.2.1"
     zrender "^5.1.1"
 
-echarts@^5.1.2, echarts@^5.4.2:
+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.0.1, echarts@^5.1.2, echarts@^5.4.2:
   version "5.4.2"
   resolved "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz"
   integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==