From 9208afcea6521e3ba16b21e4d3c83bce228b62c2 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Tue, 4 Jun 2024 13:39:15 +0800
Subject: [PATCH] gx

---
 src/view/echarts_hygiene/eP5.vue | 203 ++++++++------
 src/view/echarts_hygiene/eP7.vue | 437 +++++++++++++++++++------------
 src/view/echarts_hygiene/pie.vue |   4 +-
 src/view/echarts_yl/ylJHSY.vue   |  63 +++--
 src/view/echarts_yl/ylSMFW.vue   |  75 ++++--
 src/view/sy.vue                  |  18 +-
 6 files changed, 507 insertions(+), 293 deletions(-)

diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue
index 6676019..a809692 100644
--- a/src/view/echarts_hygiene/eP5.vue
+++ b/src/view/echarts_hygiene/eP5.vue
@@ -44,32 +44,6 @@ const getOption = () => {
       {
         type: "category",
         axisLabel: {
-          // formatter: function (params) {
-          //   var str = ""; // 最终拼接成的字符串
-          //   var paramsLen = params.length; // 获取每项文字的个数
-          //   var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
-          //   var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
-          //   if (paramsLen > len) {
-          //     //大于设定的len就换行，不大于就不变化
-          //     for (var i = 0; i < rowNumber; i++) {
-          //       var temp = ""; // 表示每一次截取的字符串
-          //       var start = i * len; // 开始截取的位置
-          //       var end = start + len; // 结束截取的位置
-          //       if (i == rowNumber - 1) {
-          //         // 最后一次不换行
-          //         temp = params.substring(start, paramsLen);
-          //       } else {
-          //         // 每一次拼接字符串并换行
-          //         temp = params.substring(start, end) + "\n";
-          //       }
-          //       str += temp; // 最终拼成的字符串
-          //     }
-          //   } else {
-          //     // 给新的字符串赋值
-          //     str = params;
-          //   }
-          //   return str; //返回字符串
-          // },
           textStyle: {
             color: "#ffffff",
             fontSize: 15,
@@ -116,6 +90,7 @@ const getOption = () => {
     ],
     series: [
       {
+        z: 1,
         name: "精神病健康居家在册管理人数",
         type: "bar",
         data: data.rs,
@@ -131,65 +106,143 @@ const getOption = () => {
         itemStyle: {
           normal: {
             color: function (params) {
+              // var colorList = [
+              //   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)",
+              //       },
+              //     ],
+              //     false
+              //   ),
+              //   new echarts.graphic.LinearGradient(
+              //     0,
+              //     0,
+              //     0,
+              //     1,
+              //     [
+              //       {
+              //         offset: 0,
+              //         color: "rgba(255, 243, 119, 1)",
+              //       },
+              //       {
+              //         offset: 1,
+              //         color: "rgba(255, 242, 142, 0.20)",
+              //       },
+              //     ],
+              //     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
+              //   ),
+              // ];
               var colorList = [
-                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)",
-                    },
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(23, 237, 255, .7)" },
+                    { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+                    { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+                    { offset: 1, color: "rgba(23, 237, 255, .5)" },
                   ],
-                  false
-                ),
-                new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(255, 243, 119, 1)",
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(255, 242, 142, 0.20)",
-                    },
+                },
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
+                    { offset: 1, color: "rgba(255, 242, 142, .5)" },
                   ],
-                  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)",
-                    },
+                },
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(142, 187, 255, .7)" },
+                    { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+                    { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+                    { offset: 1, color: "rgba(142, 187, 255, .5)" },
                   ],
-                  false
-                ),
+                },
               ];
-
               return colorList[params.dataIndex % colorList.length];
             },
           },
         },
       },
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.rs,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [21, 15],
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [
+                {
+                  offset: 1,
+                  color: "rgba(23, 237, 255, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(255, 242, 142, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(142, 187, 255, 1)",
+                },
+              ];
+
+              return colorList[params.dataIndex % colorList.length].color;
+            },
+          },
+        },
+        // itemStyle: {
+        //   borderColor: "#2fffa4",
+        //   color: "rgba(142, 187, 255, 1)",
+        // },
+      },
     ],
   };
 };
diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue
index 41f42a6..bd005dd 100644
--- a/src/view/echarts_hygiene/eP7.vue
+++ b/src/view/echarts_hygiene/eP7.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup >
-import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 const props = defineProps({
@@ -11,207 +11,304 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  year:{
+  year: {
     type: Array,
     default: () => [],
-  }
+  },
+});
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
 });
-const data= reactive({
-  list:[],
-  year:[],
-  option:{},
-  bg:[],
-})
 const chart = ref(); // 创建DOM引用
 
 const getOption = () => {
-data.option = {
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br />{a0}:{c0} ",
-  },
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a0}:{c0} ",
+    },
 
-  grid: {
-    top: "15%",
-    left: "5%",
-    right: "10%",
-    bottom: "10%",
-    containLabel: true,
-  },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
+    grid: {
+      top: "15%",
+      left: "5%",
+      right: "10%",
+      bottom: "10%",
+      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,
+        },
+      },
+    ],
+
+    yAxis: [
+      {
+        name: "历年体检人数",
+        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",
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
           color: "#ffffff",
           fontSize: 16,
+          lineHeight: 19,
         },
       },
-
-      data: data.year,
-    },
-    {
-      axisTick: false,
-      type: "category",
-      data: data.year,
-      axisLabel: {
-        show: false,
-      },
-    },
-  ],
-
-  yAxis: [
-    {
-      name: "历年体检人数",
-      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",
-        },
-      },
-    },
-     {
-      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: 16,
-        fontFamily: "MicrosoftYaHei",
-        color: "#ffffff",
-        fontSize: 16,
-        lineHeight: 19,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "体检人数",
-      type: "bar",
-      data: data.list,
-      barWidth: 20,
-            label: {
+    ],
+    series: [
+      {
+        z: 1,
+        name: "体检人数",
+        type: "bar",
+        data: data.list,
+        barWidth: 20,
+        label: {
           show: true,
           color: "#ffffff",
-         position:'top',
+          position: "top",
           formatter: function (data) {
             return data.value;
           },
         },
-      itemStyle: {
-        normal: {
-          color: function (params) {
-               var colorList = [
-              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)",
-                  },
-                ],
-                false),
-              new echarts.graphic.LinearGradient(0, 0, 0, 1,    [
-                  {
-                    offset: 0,
-                    color: "rgba(255, 243, 119, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(255, 242, 142, 0.20)",
-                  },
-                ],
-                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];
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              // var colorList = [
+              //   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)",
+              //       },
+              //     ],
+              //     false
+              //   ),
+              //   new echarts.graphic.LinearGradient(
+              //     0,
+              //     0,
+              //     0,
+              //     1,
+              //     [
+              //       {
+              //         offset: 0,
+              //         color: "rgba(255, 243, 119, 1)",
+              //       },
+              //       {
+              //         offset: 1,
+              //         color: "rgba(255, 242, 142, 0.20)",
+              //       },
+              //     ],
+              //     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
+              //   ),
+              // ];
+              var colorList = [
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(23, 237, 255, .7)" },
+                    { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+                    { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+                    { offset: 1, color: "rgba(23, 237, 255, .5)" },
+                  ],
+                },
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
+                    { offset: 1, color: "rgba(255, 242, 142, .5)" },
+                  ],
+                },
+                {
+                  type: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(142, 187, 255, .7)" },
+                    { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+                    { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+                    { offset: 1, color: "rgba(142, 187, 255, .5)" },
+                  ],
+                },
+              ];
+              return colorList[params.dataIndex % colorList.length];
+            },
           },
         },
       },
-    },
-       {
-      type: "bar",
-      xAxisIndex: 1,
-      yAxisIndex: 1,
-      itemStyle: {
-        color: "rgba(221, 242, 255, 0.1)",
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: data.bg.map(() => 100),
+        barWidth: 50,
       },
-      data: data.bg.map(() => 100),
-      barWidth: 50,
-    },
-  ],
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [23, 15],
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [
+                {
+                  offset: 1,
+                  color: "rgba(23, 237, 255, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(255, 242, 142, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(142, 187, 255, 1)",
+                },
+              ];
+
+              return colorList[params.dataIndex % colorList.length].color;
+            },
+          },
+        },
+        // itemStyle: {
+        //   borderColor: "#2fffa4",
+        //   color: "rgba(142, 187, 255, 1)",
+        // },
+      },
+    ],
+  };
 };
-}
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
-}
+};
 
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list = props.list
-    data.year = props.year
-    data.year.forEach(()=>{
-      data.bg.push(0)
-    })
-    getOption()
-    setChart()
-  }, 600)
+    data.list = props.list;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
-
 </script>
 
 <style scoped>
diff --git a/src/view/echarts_hygiene/pie.vue b/src/view/echarts_hygiene/pie.vue
index 2064187..547f8fd 100644
--- a/src/view/echarts_hygiene/pie.vue
+++ b/src/view/echarts_hygiene/pie.vue
@@ -126,7 +126,7 @@ const getOption = () => {
         data: data.zgffrc,
         symbol: "diamond",
         symbolOffset: ["-20%", "-50%"],
-        symbolSize: [19, 10],
+        symbolSize: [17, 10],
         itemStyle: {
           borderColor: "#2fffa4",
           color: "rgba(142, 187, 255, 1)",
@@ -183,7 +183,7 @@ const getOption = () => {
         data: data.cxffrc,
         symbol: "diamond",
         symbolOffset: [4, "-50%"],
-        symbolSize: [19, 10],
+        symbolSize: [17, 10],
         itemStyle: {
           borderColor: "#32ffee",
           color: "rgba(23, 237, 255, 1)",
diff --git a/src/view/echarts_yl/ylJHSY.vue b/src/view/echarts_yl/ylJHSY.vue
index 1ea7e91..3299593 100644
--- a/src/view/echarts_yl/ylJHSY.vue
+++ b/src/view/echarts_yl/ylJHSY.vue
@@ -210,33 +210,49 @@ const getOption = () => {
     ],
     series: [
       {
+        z: 1,
         yAxisIndex: 0,
         name: "计划生育人数",
         data: data.list1,
         barWidth: 20,
         type: "bar",
-        label:{
-        show:true,
-        position:'inside',
-        color:'#ffffff',
-        formatter:function(data){
-          return data.value
-        }
-      },
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+              { offset: 1, color: "rgba(142, 187, 255, .5)" },
+            ],
+          },
+        },
+        label: {
+          show: true,
+          position: "inside",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
       },
       {
         yAxisIndex: 1,
         name: "计划生育补贴金额",
         data: data.list2,
         type: "line", //线状图
-        label:{
-        show:true,
-        position:'top',
-        color:'#ffffff',
-        formatter:function(data){
-          return data.value
-        }
-      },
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
         itemStyle: {
           borderColor: "#00FCFF",
           borderWidth: 1,
@@ -274,6 +290,21 @@ const getOption = () => {
         },
         type: "bar",
       },
+      //顶部四边形
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [22, 15],
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(142, 187, 255, 1)",
+        },
+      },
     ],
   };
 };
diff --git a/src/view/echarts_yl/ylSMFW.vue b/src/view/echarts_yl/ylSMFW.vue
index 341a308..cb945e9 100644
--- a/src/view/echarts_yl/ylSMFW.vue
+++ b/src/view/echarts_yl/ylSMFW.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 340px;height:250px"></div>
+  <div ref="chart" style="width: 340px; height: 250px"></div>
 </template>
 
 <script setup>
@@ -9,8 +9,8 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 150, 80, 70, 110, 130];
-const lineData = [150, 230, 224, 218, 135, 147, 260];
+const data = [120, 200, 150, 80, 70];
+const lineData = [150, 230, 224, 218, 135];
 const max = data
   .concat(lineData)
   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
@@ -68,7 +68,7 @@ const option = {
     fontSize: 16,
   },
   calculable: true,
-  
+
   xAxis: [
     {
       type: "category",
@@ -80,8 +80,8 @@ const option = {
         },
       },
       axisTick: {
-      show: false, // 设置轴刻度不显示
-    },
+        show: false, // 设置轴刻度不显示
+      },
       data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
     },
     {
@@ -128,7 +128,8 @@ const option = {
       name: "次数/次",
       min: 0,
       max: max,
-      splitLine: {//分割线配置
+      splitLine: {
+        //分割线配置
         show: false,
         lineStyle: {
           color: "rgba(255, 255, 255, 0.3)",
@@ -136,7 +137,8 @@ const option = {
           fontSize: 16,
         },
       },
-      axisLabel: {//y轴文字的配置
+      axisLabel: {
+        //y轴文字的配置
         textStyle: {
           color: "#ffffff",
           fontSize: 16,
@@ -156,29 +158,45 @@ const option = {
   ],
   series: [
     {
+      z: 1,
       name: "上门服务时长",
       data: data,
       barWidth: 20,
       type: "bar",
-         label:{
-        show:true,
-        color:'#ffffff',
-        formatter:function(data){
-          return data.value
-        }
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: "rgba(142, 187, 255, .7)" },
+            { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+            { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+            { offset: 1, color: "rgba(142, 187, 255, .5)" },
+          ],
+        },
+      },
+      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
-        }
+      label: {
+        show: true,
+        position: "top",
+        color: "#ffffff",
+        formatter: function (data) {
+          return data.value;
+        },
       },
       itemStyle: {
         borderColor: "#00FCFF",
@@ -216,6 +234,21 @@ const option = {
       },
       type: "bar",
     },
+    //顶部四边形
+    {
+      z: 1,
+      name: "上部1",
+      type: "pictorialBar",
+      symbolPosition: "end",
+      data: data,
+      symbol: "diamond",
+      symbolOffset: ["0%", "-50%"],
+      symbolSize: [22, 15],
+      itemStyle: {
+        borderColor: "#2fffa4",
+        color: "rgba(142, 187, 255, 1)",
+      },
+    },
   ],
 };
 
diff --git a/src/view/sy.vue b/src/view/sy.vue
index 6c5f2bb..ab5f247 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -425,21 +425,21 @@
             </div>
           </div>
           <div class="jtsyBoxbot">
-            <div class="jtsyBoxtop1">
-              <img :src="data.jtsyList[2].img" alt="" />
+            <div class="jtsyBoxtop1" v-for="(item,index) in data.jtsyList.slice(2,5)">
+              <img :src="item.img" alt="" />
               <div>
-                <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
+                <div class="jtsyname">{{ item.name }}</div>
                 <div class="jtsytext">
-                  {{ data.jtsyList[2].key1 }}：
-                  <span>{{ data.jtsyList[2].key1_value }}</span>
+                  {{ item.key1 }}：
+                  <span>{{ item.key1_value }}</span>
                 </div>
                 <div>
-                  {{ data.jtsyList[2].key2 }}：
-                  <span>{{ data.jtsyList[2].key2_value }}</span>
+                  {{ item.key2 }}：
+                  <span>{{ item.key2_value }}</span>
                 </div>
               </div>
             </div>
-            <div class="jtsyBoxtop1">
+            <!-- <div class="jtsyBoxtop1">
               <img :src="data.jtsyList[3].img" alt="" />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
@@ -466,7 +466,7 @@
                   <span>{{ data.jtsyList[4].key2_value }}</span>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>