Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/echarts_hygiene/eP5.vue

@@ -84,8 +84,9 @@ const getOption = () => {
       {
         name: "在册数",
         type: "value",
-                    nameTextStyle: { // 设置Y轴名称的样式
+        nameTextStyle: {
-            fontSize: 14 // 这里设置字体大小为20
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
         },
         splitLine: {
           show: true,
@@ -119,47 +120,73 @@ const getOption = () => {
         type: "bar",
         data: data.rs,
         barWidth: 20,
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
         itemStyle: {
           normal: {
             color: function (params) {
-               var colorList = [
+              var colorList = [
-              new echarts.graphic.LinearGradient(0, 0, 0, 1,   [
+                new echarts.graphic.LinearGradient(
-                  {
+                  0,
-                    offset: 0,
+                  0,
-                    color: "rgba(23, 237, 255, 1)",
+                  0,
-                  },
+                  1,
-                  {
+                  [
-                    offset: 1,
+                    {
-                    color: "rgba(23, 237, 255, 0.20)",
+                      offset: 0,
-                  },
+                      color: "rgba(23, 237, 255, 1)",
-                ],
+                    },
-                false),
+                    {
-              new echarts.graphic.LinearGradient(0, 0, 0, 1,    [
+                      offset: 1,
-                  {
+                      color: "rgba(23, 237, 255, 0.20)",
-                    offset: 0,
+                    },
-                    color: "rgba(255, 243, 119, 1)",
+                  ],
-                  },
+                  false
-                  {
+                ),
-                    offset: 1,
+                new echarts.graphic.LinearGradient(
-                    color: "rgba(255, 242, 142, 0.20)",
+                  0,
-                  },
+                  0,
-                ],
+                  0,
-                false),
+                  1,
-              new echarts.graphic.LinearGradient(0, 0, 0, 1,     [
+                  [
-                  {
+                    {
-                    offset: 0,
+                      offset: 0,
-                    color: "rgba(142, 187, 255, 1)",
+                      color: "rgba(255, 243, 119, 1)",
-                  },
+                    },
-                  {
+                    {
-                    offset: 1,
+                      offset: 1,
-                    color: "rgba(142, 187, 255, 0.20)",
+                      color: "rgba(255, 242, 142, 0.20)",
-                  },
+                    },
-                ],
+                  ],
-                false),
+                  false
-            ];
+                ),
+                new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(142, 187, 255, 1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(142, 187, 255, 0.20)",
+                    },
+                  ],
+                  false
+                ),
+              ];
 
-             return colorList[params.dataIndex % colorList.length];
+              return colorList[params.dataIndex % colorList.length];
-          },
+            },
           },
         },
       },

src/view/echarts_sy/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>
@@ -175,16 +175,16 @@ const getOption = () => {
     legend: [
       {
         orient: "vertical",
-        right: "6%",
+        right: "1%",
-        top: "10%",
+        top: "16%",
-        itemWidth: 25, // 可以设置图例标记的宽度
+        itemWidth: 20, // 可以设置图例标记的宽度
         itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
-        itemGap: 19,
+        itemGap: 20,
-        itemStyle: {
+        // itemStyle: {
-          borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
+        //   borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
-          borderWidth: 10, // 图例边框宽度
+        //   borderWidth: 10, // 图例边框宽度
-          borderRadius: 20,
+        //   borderRadius: 20,
-        },
+        // },
         textStyle: {
           color: "#ffffff",
           fontSize: 14,
@@ -197,11 +197,16 @@ const getOption = () => {
           },
         },
         data: data.list,
-        formatter: (name) => {
+
-          if (data.list.length) {
+        //格式化图例文本
-            const item = data.list.filter((item) => item.name === name)[0];
+        formatter: function (name) {
-            return `{name|${name}}`;
+          var target;
+          for (var i = 0, l = data.list.length; i < l; i++) {
+            if (data.list[i].name == name) {
+              target = data.list[i].value;
+            }
           }
+            return `${name}:${target} 人`;
         },
       },
     ],
@@ -221,8 +226,8 @@ const getOption = () => {
       {
         type: "pie",
         roseType: "radius",
-        radius: ["20%", "85%"],
+        radius: ["15%", "80%"],
-        center: ["25%", "50%"],
+        center: ["20%", "50%"],
         label: {
           position: "inside",
           formatter(item) {
@@ -263,8 +268,8 @@ const getOption = () => {
       {
         type: "pie",
         roseType: "radius",
-        radius: ["20%", "87%"],
+        radius: ["15%", "82%"],
-        center: ["25%", "50%"],
+        center: ["20%", "50%"],
         label: {
           show: false,
         },

src/view/echarts_yl/eP3_2.vue

@@ -35,17 +35,176 @@ const data = reactive({
   list2: [],
   year: [],
   option: {},
+  bg:[]
 });
 
+// const getOption = () => {
+//   data.option = {
+//     tooltip: {
+//       trigger: "axis",
+//       formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+//     },
+//     legend: {
+//       top: "5%",
+//       right: "11%",
+//       textStyle: {
+//         fontSize: 16,
+//         color: "#ffffff",
+//       },
+//     },
+//     grid: {
+//       top: "25%",
+//       left: "1%",
+//       right: "10%",
+//       bottom: "5%",
+//       containLabel: true,
+//     },
+//     calculable: true,
+//     xAxis: [
+//       {
+//         type: "category",
+//         axisLabel: {
+//           //坐标轴刻度标签的相关设置
+//           textStyle: {
+//             color: "#ffffff",
+//             fontSize: 16,
+//           },
+//         },
+//         data: data.year,
+//       },
+//       {
+//         axisTick: false,
+//         type: "category",
+//         data: data.year,
+//         axisLabel: {
+//           show: false,
+//           color: "#ffffff",
+//           fontSize: 16,
+//         },
+//       },
+//     ],
+
+//     yAxis: [
+//       {
+//         type: "value",
+//         splitLine: {
+//           show: true,
+//           lineStyle: {
+//             color: "rgba(226, 226, 226, 0.3)",
+//             width: 1,
+//           },
+//         },
+//         axisLabel: {
+//           //坐标轴刻度标签的相关设置
+//           textStyle: {
+//             color: "#ffffff",
+//             fontSize: 16,
+//           },
+//         },
+//       },
+//       {
+//         type: "value",
+//         min: 0,
+//         max: 100,
+//         splitLine: {
+//           show: false,
+//           lineStyle: {
+//             type: "solid",
+//             color: "rgb(221, 242, 255,0.3)",
+//           },
+//         },
+//         axisLine: {
+//           show: false,
+//           lineStyle: {
+//             type: "dotted",
+//           },
+//         },
+//         axisLabel: {
+//           show: false,
+//           fontSize: 16,
+//           color: "#DEF1FF",
+//           fontFamily: "MicrosoftYaHei",
+//           lineHeight: 19,
+//         },
+//       },
+//     ],
+//     series: [
+//       {
+//         name: "特困补助金额",
+//         type: "bar",
+//         data: data.list1,
+//         barWidth: "18%",
+//         itemStyle: {
+//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//             {
+//               offset: 0,
+//               color: "rgba(162, 187, 255, 1)",
+//             },
+//             {
+//               offset: 1,
+//               color: "rgba(162, 187, 255, 0.20)",
+//             },
+//           ]),
+//         },
+//         label: {
+//           show: true,
+//           color: "#ffffff",
+//           position: "top",
+//           formatter: function (data) {
+//             return data.value;
+//           },
+//         },
+//       },
+//       {
+//         name: "低保补助金额",
+//         type: "bar",
+//         data: data.list2,
+//         barWidth: "18%",
+//         itemStyle: {
+//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//             {
+//               offset: 0,
+//               color: "rgba(23, 237, 255, 1)",
+//             },
+//             {
+//               offset: 1,
+//               color: "rgba(23, 237, 255, 0.20)",
+//             },
+//           ]),
+//         },
+//         label: {
+//           show: true,
+//           color: "#ffffff",
+//           position: "top",
+//           formatter: function (data) {
+//             return data.value;
+//           },
+//         },
+//       },
+//       {
+//         type: "bar",
+//         xAxisIndex: 1,
+//         yAxisIndex: 1,
+//         itemStyle: {
+//           color: "rgba(221, 242, 255, 0.1)",
+//         },
+//         data: data.year.map(() => 100),
+//         barWidth: 50,
+//       },
+//     ],
+//   };
+// };
 const getOption = () => {
   data.option = {
     tooltip: {
       trigger: "axis",
-      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
     },
     legend: {
+      data: ["特困补助金额", "低保补助金额"],
       top: "5%",
-      right: "11%",
+      right: "28%",
       textStyle: {
         fontSize: 16,
         color: "#ffffff",
@@ -55,41 +214,40 @@ const getOption = () => {
       top: "25%",
       left: "1%",
       right: "10%",
-      bottom: "5%",
+      bottom: "3%",
       containLabel: true,
     },
-    calculable: true,
+
-    xAxis: [
+    xAxis: {
-      {
+      type: "category",
-        type: "category",
+      // boundaryGap: false,
-        axisLabel: {
+      data: data.year,
-          //坐标轴刻度标签的相关设置
+      axisLabel: {
-          textStyle: {
+        //坐标轴刻度标签的相关设置
-            color: "#ffffff",
+        textStyle: {
-            fontSize: 16,
-          },
-        },
-        data: data.year,
-      },
-      {
-        axisTick: false,
-        type: "category",
-        data: data.year,
-        axisLabel: {
-          show: false,
           color: "#ffffff",
           fontSize: 16,
         },
       },
-    ],
+    },
-
     yAxis: [
       {
+        name: "特困补助金额",
         type: "value",
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
         splitLine: {
           show: true,
           lineStyle: {
-            color: "rgba(226, 226, 226, 0.3)",
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
             width: 1,
           },
         },
@@ -100,95 +258,108 @@ const getOption = () => {
             fontSize: 16,
           },
         },
-      },
-      {
-        type: "value",
-        min: 0,
-        max: 100,
-        splitLine: {
-          show: false,
-          lineStyle: {
-            type: "solid",
-            color: "rgb(221, 242, 255,0.3)",
-          },
-        },
         axisLine: {
+          //y轴线的颜色以及宽度
           show: false,
           lineStyle: {
-            type: "dotted",
+            color: "#ffffff",
-          },
+            fontSize: 16,
-        },
+            width: 1,
-        axisLabel: {
+            type: "solid",
-          show: false,
-          fontSize: 16,
-          color: "#DEF1FF",
-          fontFamily: "MicrosoftYaHei",
-          lineHeight: 19,
-        },
-      },
-    ],
-    series: [
-      {
-        name: "特困补助金额",
-        type: "bar",
-        data: data.list1,
-        barWidth: "18%",
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(162, 187, 255, 1)",
-            },
-            {
-              offset: 1,
-              color: "rgba(162, 187, 255, 0.20)",
-            },
-          ]),
-        },
-        label: {
-          show: true,
-          color: "#ffffff",
-          position: "top",
-          formatter: function (data) {
-            return data.value;
           },
         },
       },
       {
         name: "低保补助金额",
+        type: "value",
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50;
+        },
+        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.list2,
+        data: data.bg,
-        barWidth: "18%",
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "特困补助金额",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          borderColor: "#00FCFF",
-            {
+          borderWidth: 1,
-              offset: 0,
+          color: "#00FCFF",
-              color: "rgba(23, 237, 255, 1)",
-            },
-            {
-              offset: 1,
-              color: "rgba(23, 237, 255, 0.20)",
-            },
-          ]),
         },
         label: {
           show: true,
           color: "#ffffff",
-          position: "top",
+          position:'bottom',
           formatter: function (data) {
             return data.value;
           },
         },
+        data: data.list1,
       },
       {
-        type: "bar",
-        xAxisIndex: 1,
         yAxisIndex: 1,
+        name: "低保补助金额",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
         itemStyle: {
-          color: "rgba(221, 242, 255, 0.1)",
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
         },
-        data: data.year.map(() => 100),
+        label: {
-        barWidth: 50,
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        data: data.list2,
       },
     ],
   };
@@ -207,6 +378,9 @@ onBeforeMount(() => {
     data.list1 = props.list1;
     data.list2 = props.list2;
     data.year = props.year;
+        data.year.forEach(() => {
+      data.bg.push(0);
+    });
     getOption();
     setChart();
   }, 600);
@@ -214,4 +388,5 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
+
 </style>

src/view/echarts_yl/ylJHSY.vue

@@ -232,7 +232,7 @@ const getOption = () => {
         label:{
         show:true,
         position:'top',
-        color:'rgba(0, 252, 255, 1)',
+        color:'#ffffff',
         formatter:function(data){
           return data.value
         }

src/view/echarts_yl/ylSMFW.vue

@@ -160,11 +160,26 @@ const option = {
       data: data,
       barWidth: 20,
       type: "bar",
+         label:{
+        show:true,
+        color:'#ffffff',
+        formatter:function(data){
+          return data.value
+        }
+      },
     },
     {
       name: "上门服务次数",
       data: lineData,
       type: "line", //线状图
+         label:{
+        show:true,
+        position:'top',
+        color:'#ffffff',
+        formatter:function(data){
+          return data.value
+        }
+      },
       itemStyle: {
         borderColor: "#00FCFF",
         borderWidth: 1,

src/view/echarts_yl/ylXZZC.vue

@@ -215,6 +215,14 @@ const getOption = () => {
             ]),
           },
         },
+           label:{
+        show:true,
+        position:'right',
+        color:'#ffffff',
+        formatter:function(data){
+          return data.value
+        }
+      },
       },
     ],
   };

src/view/sy.vue

@@ -196,7 +196,7 @@
           </div>
         </div>
         <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
-        <ePie style="margin-bottom: 30px" :list="data.ageGroup"></ePie>
+        <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
         <div class="table">
           <div class="table_choose">
             <div