gx

src/components/header.vue

@@ -164,6 +164,7 @@ onMounted(() => {
       display: flex;
       position: absolute;
       align-items: center;
+      z-index: 2;
     }
 
     &-left {

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,
+                  type: "linear",
-                      color: "rgba(23, 237, 255, 1)",
+                  x: 0,
-                    },
+                  x2: 1,
-                    {
+                  y: 0,
-                      offset: 1,
+                  y2: 0,
-                      color: "rgba(23, 237, 255, 0.20)",
+                  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,
+                  type: "linear",
-                      color: "rgba(255, 242, 142, 0.20)",
+                  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,
+                  type: "linear",
-                      color: "rgba(142, 187, 255, 0.20)",
+                  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)",
+        // },
+      },
     ],
   };
 };

src/view/echarts_hygiene/eP7.vue

@@ -14,14 +14,14 @@ const props = defineProps({
   year: {
     type: Array,
     default: () => [],
-  }
+  },
 });
 const data = reactive({
   list: [],
   year: [],
   option: {},
   bg: [],
-})
+});
 const chart = ref(); // 创建DOM引用
 
 const getOption = () => {
@@ -66,8 +66,9 @@ data.option = {
       {
         name: "历年体检人数",
         type: "value",
-                  nameTextStyle: { // 设置Y轴名称的样式
+        nameTextStyle: {
-            fontSize: 14 // 这里设置字体大小为20
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
         },
         splitLine: {
           show: true,
@@ -123,6 +124,7 @@ data.option = {
     ],
     series: [
       {
+        z: 1,
         name: "体检人数",
         type: "bar",
         data: data.list,
@@ -130,7 +132,7 @@ data.option = {
         label: {
           show: true,
           color: "#ffffff",
-         position:'top',
+          position: "top",
           formatter: function (data) {
             return data.value;
           },
@@ -138,42 +140,100 @@ data.option = {
         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,
+                  type: "linear",
-                    color: "rgba(23, 237, 255, 1)",
+                  x: 0,
-                  },
+                  x2: 1,
-                  {
+                  y: 0,
-                    offset: 1,
+                  y2: 0,
-                    color: "rgba(23, 237, 255, 0.20)",
+                  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,
+                  type: "linear",
-                    color: "rgba(255, 242, 142, 0.20)",
+                  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,
+                  type: "linear",
-                    color: "rgba(142, 187, 255, 0.20)",
+                  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];
             },
           },
@@ -189,29 +249,66 @@ data.option = {
         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.list = props.list;
-    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>
 
 <style scoped>

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

src/view/echarts_work/eP3.vue

@@ -246,7 +246,7 @@ const getOption = () => {
         yAxisIndex: 0,
         name: "特困救助人次",
         data: data.list1,
-        barWidth: 10,
+        barWidth: 15,
         type: "bar",
         // itemStyle: {
         //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -282,7 +282,7 @@ const getOption = () => {
         yAxisIndex: 0,
         name: "低保救助人次",
         data: data.list2,
-        barWidth: 10,
+        barWidth: 15,
         type: "bar",
         itemStyle: {
           color: {
@@ -318,7 +318,7 @@ const getOption = () => {
         yAxisIndex: 0,
         name: "低边救助人次",
         data: data.list3,
-        barWidth: 10,
+        barWidth: 15,
         type: "bar",
         itemStyle: {
           color: {
@@ -386,8 +386,8 @@ const getOption = () => {
         symbolPosition: "end",
         data: data.list1,
         symbol: "diamond",
-        symbolOffset: ["-20%", "-50%"],
+        symbolOffset: ["-45%", "-50%"],
-        symbolSize: [14, 8],
+        symbolSize: [16, 8],
         itemStyle: {
           borderColor: "#2fffa4",
           color: "rgba(142, 187, 255, 1)",
@@ -401,7 +401,7 @@ const getOption = () => {
         data: data.list2,
         symbol: "diamond",
         symbolOffset: ["0", "-50%"],
-        symbolSize: [14, 8],
+        symbolSize: [16, 8],
         itemStyle: {
           borderColor: "#2fffa4",
           color: "rgba(23, 136, 255, 1)",
@@ -414,8 +414,8 @@ const getOption = () => {
         symbolPosition: "end",
         data: data.list3,
         symbol: "diamond",
-        symbolOffset: [5, "-50%"],
+        symbolOffset: [7.5, "-50%"],
-        symbolSize: [14, 8],
+        symbolSize: [16, 8],
         itemStyle: {
           borderColor: "#32ffee",
           color: "rgba(23, 237, 255, 1)",

src/view/echarts_yl/ylJHSY.vue

@@ -210,18 +210,34 @@ const getOption = () => {
     ],
     series: [
       {
+        z: 1,
         yAxisIndex: 0,
         name: "计划生育人数",
         data: data.list1,
         barWidth: 20,
         type: "bar",
+        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',
+          position: "inside",
-        color:'#ffffff',
+          color: "#ffffff",
           formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
       },
       {
@@ -231,11 +247,11 @@ const getOption = () => {
         type: "line", //线状图
         label: {
           show: true,
-        position:'top',
+          position: "top",
-        color:'#ffffff',
+          color: "#ffffff",
           formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           borderColor: "#00FCFF",
@@ -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)",
+        },
+      },
     ],
   };
 };

src/view/echarts_yl/ylSMFW copy.vue

@@ -0,0 +1,293 @@
+<template>
+  <div ref="chart" style="width: 340px; height: 250px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+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); //找到这个新数组中的最大值
+// 背景颜色
+const color = [
+  {
+    type: "linear",
+    x: 0,
+    x2: 0,
+    y: 0,
+    y2: 1,
+    colorStops: [
+      {
+        offset: 0,
+        color: "rgba(142, 187, 255, 1)",
+      },
+      {
+        offset: 0.5,
+        color: "rgba(142, 187, 255, 0.5)",
+      },
+      {
+        offset: 1,
+        color: "rgba(142, 187, 255, 0.20)",
+      },
+    ],
+  },
+];
+const option = {
+  color,
+  tooltip: {
+    trigger: "axis",
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    axisPointer: {},
+  },
+  legend: {
+    data: ["上门服务时长", "上门服务次数"],
+    // top: "8%",
+    textStyle: {
+      fontSize: 16,
+      color: "#ffffff",
+    },
+  },
+  grid: {
+    top: "18%",
+    left: "3%",
+    right: "6%",
+    bottom: "0%",
+    containLabel: true,
+    color: "#ffffff",
+    fontSize: 16,
+  },
+  calculable: true,
+
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+      axisTick: {
+        show: false, // 设置轴刻度不显示
+      },
+      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
+    },
+    {
+      type: "category",
+      show: false,
+      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true,
+      name: "时长/小时",
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(255, 255, 255, 0.3)",
+          fontSize: 16,
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+    {
+      type: "value",
+      scale: true,
+      name: "次数/次",
+      min: 0,
+      splitLine: {
+        //分割线配置
+        show: false,
+        lineStyle: {
+          color: "rgba(255, 255, 255, 0.3)",
+          width: 1,
+          fontSize: 16,
+        },
+      },
+      axisLabel: {
+        //y轴文字的配置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+    {
+      type: "value",
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgba(255, 255, 255, 0.3)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 16,
+        color: "#ffffff",
+        lineHeight: 19,
+        fontFamily: "MicrosoftYaHei",
+      },
+    },
+  ],
+  series: [
+    {
+      z: 1,
+      yAxisIndex: 0,
+      name: "上门服务时长",
+      data: data,
+      barWidth: 20,
+      type: "bar",
+      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;
+        },
+      },
+    },
+    {
+      yAxisIndex: 1,
+      name: "上门服务次数",
+      data: lineData,
+      type: "line", //线状图
+      label: {
+        show: true,
+        position: "top",
+        color: "#ffffff",
+        formatter: function (data) {
+          return data.value;
+        },
+      },
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+    },
+    {
+      xAxisIndex: 1,
+      yAxisIndex: 2,
+      itemStyle: {
+        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+      },
+      data: data.map(() => 100),
+      barWidth: 40, //外阴影背景宽
+      emphasis: {
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(64, 247, 176, 0.25)",
+              },
+              {
+                offset: 1,
+                color: "rgba(17, 34, 64, 0.25)",
+              },
+            ],
+          },
+        },
+      },
+      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)",
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped></style>

src/view/sy.vue

@@ -177,6 +177,7 @@
           >
             <div>{{ data.employmentService.jypx }}</div>
             <div>就业培训</div>
+            <div class="moveImg"></div>
           </div>
           <div
             class="left_3_1_item"
@@ -184,6 +185,7 @@
           >
             <div>{{ data.employmentService.jyjxfw }}</div>
             <div>就业见习服务</div>
+            <div class="moveImg"></div>
           </div>
           <div
             class="left_3_1_item"
@@ -191,6 +193,7 @@
           >
             <div>{{ data.employmentService.jyyz }}</div>
             <div>就业援助</div>
+            <div class="moveImg"></div>
           </div>
         </div>
       </div>
@@ -198,6 +201,11 @@
     <div class="displayFlex center_bg">
       <div class="flex1">
         <div class="people_total">
+          <img
+            src="../assets/images/sy/主页人口.gif"
+            style="width:70%;height:112%; margin: -2% 15%;"
+            alt=""
+          >
           <div class="people_total_item left">
             <div class="number">{{ data.PopulationData.man }}</div>
             <img
@@ -2021,20 +2029,29 @@ onBeforeMount(async () => {
 //就业服务
 .left_3_1 {
   width: 94%;
-  margin-top: 15px;
+  margin-top: 40px;
   display: flex;
   justify-content: space-around;
 
   &_item {
     box-sizing: border-box;
     width: 160px;
-    height: 133px;
+    height: 112px;
     background-image: url(@/assets/images/sy/jyfw.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     text-align: center;
-    padding-top: 22px;
+    position: relative;
+    .moveImg {
+      position: absolute;
+      width: 160px;
+      height: 140px;
+      bottom: 18px;
+      background-image: url(@/assets/images/sy/jyfwM.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
       animation: example 3s infinite linear;
+    }
 
     @keyframes example {
       0% {
@@ -2559,7 +2576,7 @@ table {
         width: 146px;
         height: 104px;
         position: absolute;
-        left: -38px;
+        left: -40px;
         top: -31px;
       }
       span {
@@ -2609,7 +2626,7 @@ table {
         width: 146px;
         height: 104px;
         position: absolute;
-        left: -38px;
+        left: -40px;
         top: -31px;
       }
       span {

src/view/yl.vue

@@ -150,6 +150,7 @@
           </div>
         </div>
         <div class="minTopPart">
+          <div class="moveImg"></div>
           <div class="mtpImg1"></div>
           <div class="mtpImg2"></div>
           <div class="mtpImg3"></div>
@@ -1044,6 +1045,16 @@ const getData = async () => {
   margin-top: 10px;
   position: relative;
 
+  .moveImg{
+    position: absolute;
+    background-image: url(@/assets/ylMove.gif);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    left: 170px;
+    width: 190px;
+    height: 173px;
+  }
+
   .mtpImg1 {
     width: 140px;
     height: 24px;