1

src/view/echarts/eP3_2.vue

@@ -12,6 +12,7 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
   },
   legend: {
     top: "8%",
@@ -24,7 +25,7 @@ let option = {
   grid: {
     left: "1%",
     right: "10%",
-    bottom: "3%",
+    bottom: "0%",
     containLabel: true,
   },
   calculable: true,
@@ -39,7 +40,17 @@ let option = {
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
+     {
+      axisTick: false,
+      type: "category",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+      axisLabel: {
+        show: false,
+      },
+    },
+
   ],
+
   yAxis: [
     {
       type: "value",
@@ -57,13 +68,39 @@ let 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: [
     {
-      name: "特困发放人次",
+      name: "特困补助金额",
       type: "bar",
       data: [2.0, 4.9, 7.0, 23.2, 25.6],
-      showBackground: true,
+      barWidth: "18%",
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
@@ -76,15 +113,12 @@ let option = {
           },
         ]),
       },
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
     },
     {
-      name: "低保发放人次",
+      name: "低保补助金额",
       type: "bar",
       data: [2.6, 5.9, 9.0, 26.4, 28.7],
-      showBackground: true,
+      barWidth: "18%",
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
@@ -97,9 +131,16 @@ let option = {
           },
         ]),
       },
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
     },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
     },
   ],
 };

src/view/echarts/pie.vue

@@ -12,9 +12,19 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
-    axisPointer: {
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
-      type: "shadow",
+    // formatter: function (params) {
-    },
+    //   console.log(1111111,params);
+    //   let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
+    //   const result =circle +
+    //       params[0].color +
+    //       `"></span>` +
+    //       params[0].name +
+    //       ": " +
+    //       params[0].value;
+    //   // const result = (title ? title + '<br />' : '') + params[0].name + ': ' + params[0].value;
+    //   return result;
+    // },
   },
   legend: {
     top: "8%",
@@ -42,9 +52,16 @@ let option = {
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
+    {
+      axisTick: false,
+      type: "category",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+      axisLabel: {
+        show: false,
+      },
+    },
   ],
 
-
   yAxis: [
     {
       type: "value",
@@ -62,15 +79,38 @@ let 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: [
-
     {
       name: "职工养老保险发放人次",
       type: "bar",
       data: [2.0, 4.9, 7.0, 23.2, 25.6],
-      barWidth: "25%",
+      barWidth: "18%",
-      showBackground: true,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
@@ -83,16 +123,12 @@ let option = {
           },
         ]),
       },
-      // backgroundStyle: {
-      //   color: "rgba(180, 180, 180, 0.2)",
-      // },
     },
     {
       name: "城乡养老保险发放人次",
       type: "bar",
       data: [2.6, 5.9, 9.0, 26.4, 28.7],
-      barWidth: "25%",
+      barWidth: "18%",
-      showBackground: true,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
@@ -105,9 +141,16 @@ let option = {
           },
         ]),
       },
-      // backgroundStyle: {
+    },
-      //   color: "rgba(180, 180, 180, 0.2)",
+    {
-      // },
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
     },
   ],
 };

src/view/yl.vue

@@ -92,7 +92,7 @@
         <eP3_2 v-else></eP3_2>
       </div>
     </div>
-    <div class="displayFlex">
+    <div class="displayFlex center_bg">
       <div class="flex1">
         <div class="yd_title center_1">
         </div>
@@ -238,7 +238,7 @@ const change = (name, index) => {
 <style lang="scss" scoped>
 .displayFlex {
   box-sizing: border-box;
-  height: 90vh;
+  // height: 90vh;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -376,6 +376,7 @@ const change = (name, index) => {
 
 .left_bg {
   width:642px;
+  height: 100%;
   box-sizing: border-box;
   padding-left:50px;
   margin-right:28px;
@@ -383,7 +384,16 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-
+.center_bg{
+    width:582px;
+  height: 100%;
+  box-sizing: border-box;
+  padding-left:10px;
+  margin-right:28px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 .basicInformation {
   display: flex;
   flex-direction: row;