From abbb6c101265a903b40a97f6747e2d1d8366f902 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Thu, 23 May 2024 11:05:35 +0800
Subject: [PATCH] 1

---
 src/view/echarts_hygiene/eP5.vue |   3 +
 src/view/echarts_hygiene/eP7.vue |   3 +
 src/view/echarts_yl/eP2.vue      | 237 ++++++++++++++++++------------
 src/view/echarts_yl/eP2_2.vue    | 112 +++++++++++----
 src/view/echarts_yl/eP3.vue      | 239 +++++++++++++++++++------------
 src/view/echarts_yl/eP3_2.vue    |   3 +-
 src/view/echarts_yl/pie.vue      |   2 +-
 src/view/echarts_yl/pie2.vue     | 237 ++++++++++++++++++------------
 8 files changed, 527 insertions(+), 309 deletions(-)

diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue
index f192a51..0591fd8 100644
--- a/src/view/echarts_hygiene/eP5.vue
+++ b/src/view/echarts_hygiene/eP5.vue
@@ -84,6 +84,9 @@ const getOption = () => {
       {
         name: "在册数",
         type: "value",
+                    nameTextStyle: { // 设置Y轴名称的样式
+            fontSize: 14 // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {
diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue
index ca5fd0e..ee8495f 100644
--- a/src/view/echarts_hygiene/eP7.vue
+++ b/src/view/echarts_hygiene/eP7.vue
@@ -66,6 +66,9 @@ data.option = {
     {
       name: "历年体检人数",
       type: "value",
+                  nameTextStyle: { // 设置Y轴名称的样式
+            fontSize: 14 // 这里设置字体大小为20
+        },
       splitLine: {
         show: true,
         lineStyle: {
diff --git a/src/view/echarts_yl/eP2.vue b/src/view/echarts_yl/eP2.vue
index e5dea33..a4210b0 100644
--- a/src/view/echarts_yl/eP2.vue
+++ b/src/view/echarts_yl/eP2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%;height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 260px"></div>
 </template>
 
 <script setup >
@@ -35,102 +35,155 @@ const data = reactive({
   list2: [],
   year: [],
   option: {},
-  bg:[],
-})
+  bg: [],
+});
 
 const getOption = () => {
   data.option = {
-  tooltip: {
-    trigger: "axis",
-    padding: [20, 10, 20, 10],
-    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
-  },
-  legend: {
-    data: [ "90-98补贴人次", "99以上补贴人次"],
-    top: "8%",
-    right: "15%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
     },
-  },
-  grid: {
-    left: "1%",
-    right: "10%",
-    bottom: "3%",
-    containLabel: true,
-  },
-
-  xAxis: {
-    type: "category",
-    data: data.year,
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
+    legend: {
+      data: ["90-98补贴人次", "99以上补贴人次"],
+      top: "5%",
+      right: "25%",
       textStyle: {
+        fontSize: 16,
         color: "#ffffff",
-        fontSize: 16,
       },
     },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "rgba(255, 255, 255, 0.2)",
-        fontSize: 16,
-        width: 1,
-      },
+    grid: {
+      top:'25%',
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
     },
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
-      textStyle: {
-        color: "#ffffff",
-        fontSize: 16,
-      },
-    },
-  },
-  series: [
-    {
-      name: "背景",
-      type: "bar",
-      data: data.bg,
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-    {
-      name: "90-98补贴人次",
-      type: "line",
-      symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#E8FF00",
-        borderWidth: 1,
-        color: "#E8FF00",
+    xAxis: {
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
       },
-
-      data: data.list1,
     },
-    {
-      name: "99以上补贴人次",
-      type: "line",
-      symbol: "emptyCircle",
-
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#2468FF",
-        borderWidth: 1,
-        color: "#2468FF",
+    yAxis: [
+      {
+        type: "value",
+        name: "90-98补贴人次",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
       },
+      {
+        type: "value",
+        name: "99以上补贴人次",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
 
-      data: data.list2,
-    },
-  ],
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "90-98补贴人次",
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#E8FF00",
+          borderWidth: 1,
+          color: "#E8FF00",
+        },
+
+        data: data.list1,
+      },
+      {
+        yAxisIndex: 1,
+        name: "99以上补贴人次",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+
+        data: data.list2,
+      },
+    ],
+  };
 };
-}
 
 const setChart = () => {
   // Vue3中： 需要引入
@@ -138,21 +191,21 @@ const setChart = () => {
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
-    data.list2 = props.list2
-    data.year = props.year
-       data.year.forEach(()=>{
-      data.bg.push(0)
-    })
-    getOption()
-    setChart()
-  }, 600)
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_yl/eP2_2.vue b/src/view/echarts_yl/eP2_2.vue
index 78c1fcb..d8e1d79 100644
--- a/src/view/echarts_yl/eP2_2.vue
+++ b/src/view/echarts_yl/eP2_2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%;height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 260px"></div>
 </template>
 
 <script setup>
@@ -35,8 +35,8 @@ const data = reactive({
   list2: [],
   year: [],
   option: {},
-  bg:[],
-})
+  bg: [],
+});
 
 const getOption = () => {
   data.option = {
@@ -47,17 +47,18 @@ const getOption = () => {
     },
     legend: {
       data: ["90-98补贴金额", "99以上补贴金额"],
-      top: "8%",
-      right: "15%",
+      top: "3%",
+      right: "25%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
       },
     },
     grid: {
+      top:'25%',
       left: "1%",
       right: "10%",
-      bottom: "3%",
+      bottom: "0%",
       containLabel: true,
     },
 
@@ -81,23 +82,72 @@ const getOption = () => {
         },
       },
     },
-    yAxis: {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
-          width: 1,
+    yAxis: [
+      {
+        name: "90-98补贴金额",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
         },
       },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
+      {
+        name: "99以上补贴金额",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
         },
       },
-    },
+    ],
     series: [
       {
         name: "背景",
@@ -110,6 +160,7 @@ const getOption = () => {
         },
       },
       {
+        yAxisIndex: 0,
         name: "90-98补贴金额",
         type: "line",
         symbol: "emptyCircle",
@@ -124,6 +175,7 @@ const getOption = () => {
         data: data.list1,
       },
       {
+        yAxisIndex: 1,
         name: "99以上补贴金额",
         type: "line",
         stack: "Total",
@@ -140,7 +192,7 @@ const getOption = () => {
       },
     ],
   };
-}
+};
 
 const setChart = () => {
   // Vue3中： 需要引入
@@ -148,21 +200,21 @@ const setChart = () => {
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
-    data.list2 = props.list2
-    data.year = props.year
-       data.year.forEach(()=>{
-      data.bg.push(0)
-    })
-    getOption()
-    setChart()
-  }, 600)
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_yl/eP3.vue b/src/view/echarts_yl/eP3.vue
index 0730b4d..2bb6af8 100644
--- a/src/view/echarts_yl/eP3.vue
+++ b/src/view/echarts_yl/eP3.vue
@@ -1,9 +1,9 @@
 <template>
-  <div ref="chart" style="width: 100%;height:280px;"></div>
+  <div ref="chart" style="width: 100%; height: 285px"></div>
 </template>
 
 <script setup >
-import { onBeforeMount, reactive, ref,defineProps } from "vue";
+import { onBeforeMount, reactive, ref, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
@@ -35,121 +35,174 @@ const data = reactive({
   list2: [],
   year: [],
   option: {},
-  bg:[],
-})
+  bg: [],
+});
 
-const getOption = () =>{
+const getOption = () => {
   data.option = {
-  tooltip: {
-    trigger: "axis",
-    padding: [20, 10, 20, 10],
-    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
-  },
-  legend: {
-    data: ["特困发放人次", "低保发放人次"],
-    top: "8%",
-    right: "11%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
     },
-  },
-  grid: {
-    left: "1%",
-    right: "10%",
-    bottom: "3%",
-    containLabel: true,
-  },
-
-  xAxis: {
-    type: "category",
-    // boundaryGap: false,
-    data: data.year,
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
+    legend: {
+      data: ["特困发放人次", "低保发放人次"],
+      top: "5%",
+      right: "28%",
       textStyle: {
+        fontSize: 16,
         color: "#ffffff",
-        fontSize: 16,
       },
     },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "rgba(255, 255, 255, 0.2)",
-        fontSize: 16,
-        width: 1,
-      },
+    grid: {
+      top:'25%',
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
     },
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
-      textStyle: {
-        color: "#ffffff",
-        fontSize: 16,
-      },
-    },
-  },
-  series: [
-    {
-      name: "背景",
-      type: "bar",
-      data: data.bg,
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-    {
-      name: "特困发放人次",
-      type: "line",
-      symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
       },
-      data: data.list1,
     },
-    {
-      name: "低保发放人次",
-      type: "line",
-      symbol: "emptyCircle",
+    yAxis: [
+      {
+        name: "特困发放人次",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        name: "低保发放人次",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "特困发放人次",
+        type: "line",
+        symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#2468FF",
-        borderWidth: 1,
-        color: "#2468FF",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        data: data.list1,
       },
-      data: data.list2,
-    },
-  ],
+      {
+        yAxisIndex: 1,
+        name: "低保发放人次",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+        data: data.list2,
+      },
+    ],
+  };
 };
-}
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
-    data.list2 = props.list2
-    data.year = props.year
-       data.year.forEach(()=>{
-      data.bg.push(0)
-    })
-    getOption()
-    setChart()
-  }, 600)
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_yl/eP3_2.vue b/src/view/echarts_yl/eP3_2.vue
index 291873e..b5c3b08 100644
--- a/src/view/echarts_yl/eP3_2.vue
+++ b/src/view/echarts_yl/eP3_2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%;height:280px;"></div>
+  <div ref="chart" style="width: 100%;height:285px;"></div>
 </template>
 
 <script setup >
@@ -52,6 +52,7 @@ const getOption = () =>{
     },
   },
   grid: {
+    top:'25%',
     left: "1%",
     right: "10%",
     bottom: "5%",
diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index fd2beb6..a2e3d9e 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height:250px;"></div>
+  <div ref="chart" style="width: 100%; height:260px;"></div>
 </template>
 
 <script setup>
diff --git a/src/view/echarts_yl/pie2.vue b/src/view/echarts_yl/pie2.vue
index 47e8649..d8f0f28 100644
--- a/src/view/echarts_yl/pie2.vue
+++ b/src/view/echarts_yl/pie2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 260px"></div>
 </template>
 
 <script setup >
@@ -34,121 +34,174 @@ const data = reactive({
   list2: [],
   year: [],
   option: {},
-  bg:[],
-})
+  bg: [],
+});
 const getOption = () => {
   data.option = {
-  tooltip: {
-    trigger: "axis",
-    padding: [20, 10, 20, 10],
-    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
-  },
-  legend: {
-    data: ["职工养老保险金额", "城乡养老保险金额"],
-    top: "8%",
-    right: "11%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
     },
-  },
-  grid: {
-    left: "1%",
-    right: "10%",
-    bottom: "3%",
-    containLabel: true,
-  },
-
-  xAxis: {
-    type: "category",
-    // boundaryGap: false,
-    data: data.year,
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
+    legend: {
+      data: ["职工养老保险金额", "城乡养老保险金额"],
+      top: "3%",
+      right: "25%",
       textStyle: {
+        fontSize: 16,
         color: "#ffffff",
-        fontSize: 16,
       },
     },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "rgba(255, 255, 255, 0.2)",
-        fontSize: 16,
-        width: 1,
-      },
+    grid: {
+      top:'25%',
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
     },
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
-      textStyle: {
-        color: "#ffffff",
-        fontSize: 16,
-      },
-    },
-  },
-  series: [
-    {
-      name: "背景",
-      type: "bar",
-      data: data.bg,
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-    {
-      name: "职工养老保险金额",
-      type: "line",
-      symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
       },
-      data: data.list1,
     },
-    {
-      name: "城乡养老保险金额",
-      type: "line",
-      symbol: "emptyCircle",
-
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#2468FF",
-        borderWidth: 1,
-        color: "#2468FF",
+    yAxis: [
+      {
+        name: "职工养老保险金额",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
       },
+      {
+        name: "城乡养老保险金额",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "职工养老保险金额",
+        type: "line",
+        symbol: "emptyCircle",
 
-      data: data.list2,
-    },
-  ],
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        data: data.list1,
+      },
+      {
+        yAxisIndex: 1,
+        name: "城乡养老保险金额",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+
+        data: data.list2,
+      },
+    ],
+  };
 };
-}
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
-    data.list2 = props.list2
-    data.year = props.year
-    data.year.forEach(()=>{
-      data.bg.push(0)
-    })
-    getOption()
-    setChart()
-  }, 600)
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>