1

src/view/echarts_hygiene/eP5.vue

@@ -84,6 +84,9 @@ const getOption = () => {
       {
         name: "在册数",
         type: "value",
+                    nameTextStyle: { // 设置Y轴名称的样式
+            fontSize: 14 // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {

src/view/echarts_hygiene/eP7.vue

@@ -66,6 +66,9 @@ data.option = {
     {
       name: "历年体检人数",
       type: "value",
+                  nameTextStyle: { // 设置Y轴名称的样式
+            fontSize: 14 // 这里设置字体大小为20
+        },
       splitLine: {
         show: true,
         lineStyle: {

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 >
@@ -36,7 +36,7 @@ const data = reactive({
   year: [],
   option: {},
   bg: [],
-})
+});
 
 const getOption = () => {
   data.option = {
@@ -47,14 +47,15 @@ const getOption = () => {
     },
     legend: {
       data: ["90-98补贴人次", "99以上补贴人次"],
-    top: "8%",
+      top: "5%",
-    right: "15%",
+      right: "25%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
       },
     },
     grid: {
+      top:'25%',
       left: "1%",
       right: "10%",
       bottom: "3%",
@@ -72,8 +73,10 @@ const getOption = () => {
         },
       },
     },
-  yAxis: {
+    yAxis: [
+      {
         type: "value",
+        name: "90-98补贴人次",
         splitLine: {
           show: true,
           lineStyle: {
@@ -82,6 +85,10 @@ const getOption = () => {
             width: 1,
           },
         },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
         axisLabel: {
           //坐标轴刻度标签的相关设置
           textStyle: {
@@ -89,7 +96,52 @@ const getOption = () => {
             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",
+          },
+        },
+      },
+    ],
+
     series: [
       {
         name: "背景",
@@ -101,10 +153,10 @@ const getOption = () => {
         },
       },
       {
+        yAxisIndex: 0,
         name: "90-98补贴人次",
         type: "line",
         symbol: "emptyCircle",
-
         symbolSize: 10,
         itemStyle: {
           borderColor: "#E8FF00",
@@ -115,6 +167,7 @@ const getOption = () => {
         data: data.list1,
       },
       {
+        yAxisIndex: 1,
         name: "99以上补贴人次",
         type: "line",
         symbol: "emptyCircle",
@@ -130,7 +183,7 @@ const getOption = () => {
       },
     ],
   };
-}
+};
 
 const setChart = () => {
   // Vue3中： 需要引入
@@ -138,21 +191,21 @@ const setChart = () => {
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
+    data.list1 = props.list1;
-    data.list2 = props.list2
+    data.list2 = props.list2;
-    data.year = props.year
+    data.year = props.year;
     data.year.forEach(() => {
-      data.bg.push(0)
+      data.bg.push(0);
-    })
+    });
-    getOption()
+    getOption();
-    setChart()
+    setChart();
-  }, 600)
+  }, 600);
 });
 </script>
 

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>
@@ -36,7 +36,7 @@ const data = reactive({
   year: [],
   option: {},
   bg: [],
-})
+});
 
 const getOption = () => {
   data.option = {
@@ -47,17 +47,18 @@ const getOption = () => {
     },
     legend: {
       data: ["90-98补贴金额", "99以上补贴金额"],
-      top: "8%",
+      top: "3%",
-      right: "15%",
+      right: "25%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
       },
     },
     grid: {
+      top:'25%',
       left: "1%",
       right: "10%",
-      bottom: "3%",
+      bottom: "0%",
       containLabel: true,
     },
 
@@ -81,8 +82,14 @@ const getOption = () => {
         },
       },
     },
-    yAxis: {
+    yAxis: [
+      {
+        name: "90-98补贴金额",
         type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {
@@ -97,7 +104,50 @@ const getOption = () => {
             fontSize: 16,
           },
         },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
           },
+        },
+      },
+      {
+        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.list1 = props.list1;
-    data.list2 = props.list2
+    data.list2 = props.list2;
-    data.year = props.year
+    data.year = props.year;
     data.year.forEach(() => {
-      data.bg.push(0)
+      data.bg.push(0);
-    })
+    });
-    getOption()
+    getOption();
-    setChart()
+    setChart();
-  }, 600)
+  }, 600);
 });
 </script>
 

src/view/echarts_yl/eP3.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 >
@@ -36,7 +36,7 @@ const data = reactive({
   year: [],
   option: {},
   bg: [],
-})
+});
 
 const getOption = () => {
   data.option = {
@@ -47,14 +47,15 @@ const getOption = () =>{
     },
     legend: {
       data: ["特困发放人次", "低保发放人次"],
-    top: "8%",
+      top: "5%",
-    right: "11%",
+      right: "28%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
       },
     },
     grid: {
+      top:'25%',
       left: "1%",
       right: "10%",
       bottom: "3%",
@@ -73,8 +74,14 @@ const getOption = () =>{
         },
       },
     },
-  yAxis: {
+    yAxis: [
+      {
+        name: "特困发放人次",
         type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {
@@ -90,7 +97,51 @@ const getOption = () =>{
             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: "背景",
@@ -102,6 +153,7 @@ const getOption = () =>{
         },
       },
       {
+        yAxisIndex: 0,
         name: "特困发放人次",
         type: "line",
         symbol: "emptyCircle",
@@ -115,6 +167,7 @@ const getOption = () =>{
         data: data.list1,
       },
       {
+        yAxisIndex: 1,
         name: "低保发放人次",
         type: "line",
         symbol: "emptyCircle",
@@ -129,27 +182,27 @@ const getOption = () =>{
       },
     ],
   };
-}
+};
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
+    data.list1 = props.list1;
-    data.list2 = props.list2
+    data.list2 = props.list2;
-    data.year = props.year
+    data.year = props.year;
     data.year.forEach(() => {
-      data.bg.push(0)
+      data.bg.push(0);
-    })
+    });
-    getOption()
+    getOption();
-    setChart()
+    setChart();
-  }, 600)
+  }, 600);
 });
 </script>
 

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%",

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>

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 >
@@ -35,7 +35,7 @@ const data = reactive({
   year: [],
   option: {},
   bg: [],
-})
+});
 const getOption = () => {
   data.option = {
     tooltip: {
@@ -45,17 +45,18 @@ const getOption = () => {
     },
     legend: {
       data: ["职工养老保险金额", "城乡养老保险金额"],
-    top: "8%",
+      top: "3%",
-    right: "11%",
+      right: "25%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
       },
     },
     grid: {
+      top:'25%',
       left: "1%",
       right: "10%",
-    bottom: "3%",
+      bottom: "0%",
       containLabel: true,
     },
 
@@ -71,8 +72,14 @@ const getOption = () => {
         },
       },
     },
-  yAxis: {
+    yAxis: [
+      {
+        name: "职工养老保险金额",
         type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {
@@ -88,7 +95,51 @@ const getOption = () => {
             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: "背景",
@@ -100,6 +151,7 @@ const getOption = () => {
         },
       },
       {
+        yAxisIndex: 0,
         name: "职工养老保险金额",
         type: "line",
         symbol: "emptyCircle",
@@ -113,6 +165,7 @@ const getOption = () => {
         data: data.list1,
       },
       {
+        yAxisIndex: 1,
         name: "城乡养老保险金额",
         type: "line",
         symbol: "emptyCircle",
@@ -128,27 +181,27 @@ const getOption = () => {
       },
     ],
   };
-}
+};
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list1 = props.list1
+    data.list1 = props.list1;
-    data.list2 = props.list2
+    data.list2 = props.list2;
-    data.year = props.year
+    data.year = props.year;
     data.year.forEach(() => {
-      data.bg.push(0)
+      data.bg.push(0);
-    })
+    });
-    getOption()
+    getOption();
-    setChart()
+    setChart();
-  }, 600)
+  }, 600);
 });
 </script>