1

src/view/echarts/eP2.vue

@@ -12,9 +12,11 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
   },
   legend: {
-    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
     top: "8%",
     right: "15%",
     textStyle: {
@@ -33,14 +35,14 @@ let option = {
     type: "category",
     // boundaryGap: false,
     data: ["1月", "2月", "3月", "4月", "5月"],
-    splitArea: {
+    // splitArea: {
-      show: true,
+    //   show: true,
-      interval: '10',
+    //   interval: '10',
-      areaStyle: {
+    //   areaStyle: {
-        color: ["rgba(255, 255, 255, 0.10)"],
+    //     color: ["rgba(255, 255, 255, 0.10)"],
-        width:10,
+    //     width:10,
-      },
+    //   },
-    },
+    // },
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
@@ -65,6 +67,15 @@ let option = {
     },
   },
   series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
     {
       name: "80-90补贴人次",
       type: "line",

src/view/echarts/eP2_2.vue

@@ -12,9 +12,11 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
   },
   legend: {
-    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
     top: "8%",
     right: "15%",
     textStyle: {
@@ -24,7 +26,7 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },
@@ -33,14 +35,14 @@ let option = {
     type: "category",
     // boundaryGap: false,
     data: ["1月", "2月", "3月", "4月", "5月"],
-    splitArea: {
+    // splitArea: {
-      show: true,
+    //   show: true,
-      interval: '10',
+    //   interval: '10',
-      areaStyle: {
+    //   areaStyle: {
-        color: ["rgba(255, 255, 255, 0.10)"],
+    //     color: ["rgba(255, 255, 255, 0.10)"],
-        width:10,
+    //     width:10,
-      },
+    //   },
-    },
+    // },
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
@@ -65,6 +67,15 @@ let option = {
     },
   },
   series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
     {
       name: "80-90补贴人次",
       type: "line",

src/view/echarts/eP3.vue

@@ -12,11 +12,13 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
   },
   legend: {
-    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    data: ["职工养老保险金额", "城乡养老保险金额"],
     top: "8%",
-    right: "15%",
+    right: "11%",
     textStyle: {
       fontSize: 12,
       color: "#ccc",
@@ -24,7 +26,7 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },
@@ -58,7 +60,16 @@ let option = {
   },
   series: [
     {
-      name: "特困补助金额",
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "职工养老保险金额",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",
@@ -71,9 +82,8 @@ let option = {
       },
       data: [120, 132, 101, 134, 90],
     },
-
     {
-      name: "低保补助金额",
+      name: "城乡养老保险金额",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",

src/view/echarts/eP3_2.vue

@@ -15,7 +15,7 @@ let option = {
   },
   legend: {
     top: "8%",
-    right: "5%",
+    right: "11%",
     textStyle: {
       fontSize: 12,
       color: "#ccc",
@@ -23,7 +23,7 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },

src/view/echarts/pie.vue

@@ -12,6 +12,9 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
   },
   legend: {
     top: "8%",
@@ -40,6 +43,8 @@ let option = {
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
   ],
+
+
   yAxis: [
     {
       type: "value",
@@ -59,10 +64,12 @@ let option = {
     },
   ],
   series: [
+
     {
       name: "职工养老保险发放人次",
       type: "bar",
       data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: "25%",
       showBackground: true,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -76,14 +83,15 @@ let option = {
           },
         ]),
       },
-      backgroundStyle: {
+      // backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+      //   color: "rgba(180, 180, 180, 0.2)",
-      },
+      // },
     },
     {
       name: "城乡养老保险发放人次",
       type: "bar",
       data: [2.6, 5.9, 9.0, 26.4, 28.7],
+      barWidth: "25%",
       showBackground: true,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -97,9 +105,9 @@ let option = {
           },
         ]),
       },
-      backgroundStyle: {
+      // backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+      //   color: "rgba(180, 180, 180, 0.2)",
-      },
+      // },
     },
   ],
 };

src/view/echarts/pie2.vue

@@ -12,9 +12,11 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
   },
   legend: {
-    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    data: ["职工养老保险金额", "城乡养老保险金额"],
     top: "8%",
     right: "11%",
     textStyle: {
@@ -57,6 +59,15 @@ let option = {
     },
   },
   series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
     {
       name: "职工养老保险金额",
       type: "line",

src/view/yl.vue

@@ -237,13 +237,15 @@ const change = (name, index) => {
 
 <style lang="scss" scoped>
 .displayFlex {
+  box-sizing: border-box;
+  height: 90vh;
   display: flex;
   flex-direction: column;
-  // flex: 1;
+  flex: 1;
 }
 
 .flex1 {
-  // flex: 1;
+  flex: 1;
   // padding: 0 28px;
   box-sizing: border-box;
 }
@@ -263,7 +265,7 @@ const change = (name, index) => {
   // background-repeat: no-repeat;
   // background-size: 100% 100%;
   box-sizing: border-box;
-  width: 90%;
+  width: 94%;
   height: 36px;
   position: relative;