From 966b1a9769edc9e665a845bd64b11c38f63acbb9 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Mon, 22 Apr 2024 09:32:41 +0800
Subject: [PATCH] 1

---
 src/view/echarts_work/eP1.vue |  83 ++++++++++----------
 src/view/echarts_work/eP2.vue |   7 +-
 src/view/echarts_work/eP3.vue |  10 +--
 src/view/echarts_work/eP4.vue |   7 +-
 src/view/education.vue        | 141 ++++++++++++++++++----------------
 5 files changed, 119 insertions(+), 129 deletions(-)

diff --git a/src/view/echarts_work/eP1.vue b/src/view/echarts_work/eP1.vue
index a0f0fee..c5b78fe 100644
--- a/src/view/echarts_work/eP1.vue
+++ b/src/view/echarts_work/eP1.vue
@@ -10,44 +10,15 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 const data = [120, 200, 50, 80, 70];
-const lineData = [150, 230, 24, 218, 135];
+const lineData = [1500, 2300, 204, 2018, 1305];
 const max = data
   .concat(lineData)
   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-// 背景颜色
-const color = [
-  {
-    type: "linear",
-    x: 0,
-    x2: 0,
-    y: 0,
-    y2: 1,
-    colorStops: [
-      {
-        offset: 0,
-        color: "rgba(142, 187, 255, 1)",
-      },
-      {
-        offset: 0.5,
-        color: "rgba(142, 187, 255, 0.5)",
-      },
-      {
-        offset: 1,
-        color: "rgba(142, 187, 255, 0.20)",
-      },
-    ],
-  },
-];
+
 const option = {
   tooltip: {
     trigger: "axis",
     formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {
-      type: "cross",
-      label: {
-        backgroundColor: "#3F82F7", //提示文字标题颜色
-      },
-    },
   },
   legend: {
     data: ["救助金额", "救助人数"],
@@ -65,7 +36,7 @@ const option = {
     color: "#ffffff",
   },
   calculable: true,
-  color,
+
   xAxis: [
     {
       type: "category",
@@ -92,7 +63,7 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: max,
+   
       splitLine: {
         //分割线配置
         show: false,
@@ -121,7 +92,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: max,
+   
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -146,9 +117,35 @@ const option = {
         },
       },
     },
+      {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
   ],
   series: [
     {
+      yAxisIndex: 1,
       name: "救助金额",
       data: lineData,
       type: "line", //线状图
@@ -162,6 +159,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 0,
       name: "救助人数",
       data: data,
       barWidth: 20,
@@ -179,14 +177,11 @@ const option = {
         ]),
       },
     },
-    {
+      {
+      type: "bar",
       xAxisIndex: 1,
-      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
-      },
-      data: data.map(() => max),
-      barWidth: 40, //外阴影背景宽
-      emphasis: {
+      yAxisIndex: 2,
+         emphasis: {
         itemStyle: {
           color: {
             type: "linear",
@@ -207,7 +202,11 @@ const option = {
           },
         },
       },
-      type: "bar",
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
     },
   ],
 };
diff --git a/src/view/echarts_work/eP2.vue b/src/view/echarts_work/eP2.vue
index 15e7311..bca41f3 100644
--- a/src/view/echarts_work/eP2.vue
+++ b/src/view/echarts_work/eP2.vue
@@ -44,12 +44,7 @@ const option = {
   tooltip: {
     trigger: "axis",
     formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {
-      type: "cross",
-      label: {
-        backgroundColor: "#3F82F7", //提示文字标题颜色
-      },
-    },
+
   },
   legend: {
     data: ["救助金额", "救助人数"],
diff --git a/src/view/echarts_work/eP3.vue b/src/view/echarts_work/eP3.vue
index 2dac191..9eb1967 100644
--- a/src/view/echarts_work/eP3.vue
+++ b/src/view/echarts_work/eP3.vue
@@ -36,13 +36,8 @@ const color = [
 const option = {
   tooltip: {
     trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {
-      type: "cross",
-      label: {
-        backgroundColor: "#3F82F7", //提示文字标题颜色
-      },
-    },
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
+  
   },
   legend: [
     {
@@ -153,6 +148,7 @@ const option = {
         },
       },
     },
+    
   ],
   series: [
     {
diff --git a/src/view/echarts_work/eP4.vue b/src/view/echarts_work/eP4.vue
index b875642..0fba32e 100644
--- a/src/view/echarts_work/eP4.vue
+++ b/src/view/echarts_work/eP4.vue
@@ -30,12 +30,7 @@ const option = {
   tooltip: {
     trigger: "axis",
     formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {
-      type: "cross",
-      label: {
-        backgroundColor: "#3F82F7", //提示文字标题颜色
-      },
-    },
+
   },
 
   legend: {
diff --git a/src/view/education.vue b/src/view/education.vue
index 1b73e0b..357826d 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -6,10 +6,12 @@
         <eP1></eP1>
         <div class="t_1"></div>
         <div class="t_2">
-          <div class="t_3" v-for="(item,index) in fl" :key="index">
-            <div class="top">{{item.value}}%</div>
-            <div :class='item.cls'></div>
-            <div class="right">{{item.name}}</div>
+          <div class="t_2_1" v-for="(item, index) in fl" :key="index">
+            <div class="top">{{ item.value }}%</div>
+            <div class="t_3">
+              <div :class="item.cls"></div>
+              <div class="right">{{ item.name }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -1198,80 +1200,83 @@ onBeforeMount(() => {
   background-size: 100% 100%;
 }
 .t_2 {
-  margin-top: 35px;
+  margin-top: 5px;
   padding: 0 10px;
   display: flex;
   justify-content: space-around;
-  .t_3 {
-    width: 135px;
-    height: 90px;
-    background-image: url(@/assets/images/education/fk.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    position: relative;
+  .t_2_1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     .top {
-      position: absolute;
-      left: 38px;
-      top: -25px;
       font-size: 26px;
       color: #ffffff;
       line-height: 30px;
     }
-    .left1 {
-      position: absolute;
-      left: 15px;
-      top: 35px;
-      width: 40px;
-      height: 40px;
-      background-image: url(@/assets/images/education/lset.png);
+    .t_3 {
+      width: 135px;
+      height: 90px;
+      background-image: url(@/assets/images/education/fk.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-    }
-    .left2 {
-      position: absolute;
-      left: 15px;
-      top: 35px;
-      width: 40px;
-      height: 40px;
-      background-image: url(@/assets/images/education/dszn.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-    .left3 {
-      position: absolute;
-      left: 15px;
-      top: 35px;
-      width: 40px;
-      height: 40px;
-      background-image: url(@/assets/images/education/dqjt.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-    .left4 {
-      position: absolute;
-      left: 15px;
-      top: 35px;
-      width: 40px;
-      height: 40px;
-      background-image: url(@/assets/images/education/xsdb.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-    .right {
-      position: absolute;
-      left: 65px;
-      top: 35px;
-      width: 38px;
-      height: 40px;
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 500;
-      font-size: 15px;
-      color: #ffffff;
-      line-height: 20px;
-      letter-spacing: 4px;
-      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
-      text-align: center;
-      font-style: normal;
+      position: relative;
+
+      .left1 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/lset.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .left2 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/dszn.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .left3 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/dqjt.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .left4 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/xsdb.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .right {
+        position: absolute;
+        left: 65px;
+        top: 35px;
+        width: 38px;
+        height: 40px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #ffffff;
+        line-height: 20px;
+        letter-spacing: 4px;
+        text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+        text-align: center;
+        font-style: normal;
+      }
     }
   }
 }