diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index 69218ca..23f4d63 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -2,162 +2,192 @@
   <div ref="chart" style="width: 100%; height:250px;"></div>
 </template>
 
-<script setup >
-import { onMounted, reactive, ref } from "vue";
+<script setup>
+import { onBeforeMount, reactive, defineProps, ref, nextTick } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-let option = {
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
-  },
-  legend: {
-    top: "8%",
-    right: "11%",
-    textStyle: {
-      fontSize: 12,
-      color: "#ffffff",
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
     },
   },
-  grid: {
-    left: "1%",
-    right: "10%",
-    bottom: "0%",
-    containLabel: true,
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
   },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-      data: ["2019", "2020", "2021", "2022", "2023"],
+  year: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    {
-      axisTick: false,
-      type: "category",
-      data: ["2019", "2020", "2021", "2022", "2023"],
-      axisLabel: {
-        show: false,
-      },
-    },
-  ],
+  },
+});
 
-  yAxis: [
-    {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
-          width: 1,
+const data = reactive({
+  list1: [],
+  list2: [],
+  year: [],
+  option: {}
+})
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+    },
+    legend: {
+      top: "8%",
+      right: "11%",
+      textStyle: {
+        fontSize: 12,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        data: data.year,
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: data.year,
+        axisLabel: {
+          show: false,
         },
       },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-    },
-    {
-      type: "value",
-      splitLine: {
-        show: false,
-        lineStyle: {
-          type: "solid",
-          color: "rgb(221, 242, 255,0.1)",
-        },
-      },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          type: "dotted",
-        },
-      },
-      axisLabel: {
-        show: false,
-        fontSize: 14,
-        fontFamily: "MicrosoftYaHei",
-        color: "#DEF1FF",
-        lineHeight: 19,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "职工养老保险发放人次",
-      type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
-      barWidth: "18%",
-      itemStyle: {
-        color: 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)",
-          },
-        ]),
-      },
-    },
-    {
-      name: "城乡养老保险发放人次",
-      type: "bar",
-      data: [2.6, 5.9, 9.0, 26.4, 28.7],
-      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)",
-          },
-        ]),
-      },
-    },
-    {
-      type: "bar",
-      xAxisIndex: 1,
-      yAxisIndex: 1,
-      itemStyle: {
-        color: "rgba(221, 242, 255, 0.1)",
-      },
-      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
-      barWidth: 50,
-    },
-  ],
-};
+    ],
 
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+      },
+      {
+        type: "value",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: "solid",
+            color: "rgb(221, 242, 255,0.1)",
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            type: "dotted",
+          },
+        },
+        axisLabel: {
+          show: false,
+          fontSize: 14,
+          fontFamily: "MicrosoftYaHei",
+          color: "#DEF1FF",
+          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(142, 187, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(142, 187, 255, 0.20)",
+            },
+          ]),
+        },
+      },
+      {
+        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)",
+            },
+          ]),
+        },
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+        barWidth: 50,
+      },
+    ],
+  };
+}
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+}
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1
+    data.list2 = props.list2
+    data.year = props.year
+    console.log(data, 222)
+    getOption()
+    setChart()
+  }, 600)
 });
 </script>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/src/view/echarts_yl/pie2.vue b/src/view/echarts_yl/pie2.vue
index 0b6b60a..bb4db57 100644
--- a/src/view/echarts_yl/pie2.vue
+++ b/src/view/echarts_yl/pie2.vue
@@ -3,13 +3,40 @@
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onBeforeMount, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-let option = {
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const data = reactive({
+  list1: [],
+  list2: [],
+  year: [],
+  option: {}
+})
+const getOption = () => {
+  data.option = {
   tooltip: {
     trigger: "axis",
     padding: [20, 10, 20, 10],
@@ -34,7 +61,7 @@ let option = {
   xAxis: {
     type: "category",
     // boundaryGap: false,
-    data: ["1月", "2月", "3月", "4月", "5月"],
+    data: data.year,
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
@@ -80,7 +107,7 @@ let option = {
         borderWidth: 1,
         color: "#00FCFF",
       },
-      data: [120, 132, 101, 134, 90],
+      data: data.list1,
     },
     {
       name: "城乡养老保险金额",
@@ -95,26 +122,28 @@ let option = {
         color: "#2468FF",
       },
 
-      data: [150, 232, 201, 154, 190],
+      data: data.list2,
     },
   ],
 };
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+}
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+}
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1
+    data.list2 = props.list2
+    data.year = props.year
+    getOption()
+    setChart()
+  }, 600)
 });
 </script>
 
diff --git a/src/view/yl.vue b/src/view/yl.vue
index 6f3bff4..91c2bb5 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -11,8 +11,8 @@
               style="height:35px;width:120px;margin-right:10px;" />
           </span>
         </div>
-        <ePie v-if="leftchoose.first == '1'"></ePie>
-        <ePie2 v-else></ePie2>
+        <ePie v-if="leftchoose.first == '1'" :list1="data.leftTop1" :list2="data.leftTop2" :year="data.leftTopYear"></ePie>
+        <ePie2 v-else :list1="data.leftTop3" :list2="data.leftTop4" :year="data.leftTopYear"></ePie2>
       </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_2">
@@ -123,7 +123,7 @@ import ePie3d from "./echarts_yl/pie3d.vue";
 import ylJHSY from "./echarts_yl/ylJHSY.vue";
 import ylSMFW from "./echarts_yl/ylSMFW.vue";
 import ylXZZC from "./echarts_yl/ylXZZC.vue";
-import { ref, onMounted, onBeforeMount } from "vue";
+import { ref, onMounted, onBeforeMount, reactive } from "vue";
 import http from "@/utils/request.js";
 const leftchoose = ref({
   first: "1",
@@ -133,13 +133,35 @@ const leftchoose = ref({
 const change = (name, index) => {
   leftchoose.value[name] = index;
 };
-onMounted(() => {
-  getPie1();
+const data = reactive({
+  leftTop1:[],
+  leftTop2:[],
+  leftTop3:[],
+  leftTop4:[],
+  leftTopYear:[],
+  leftCenter1:[],
+  leftCenter2:[],
+  leftCenterYear:[],
+  leftbottom1:[],
+  leftbottom2:[],
+  leftbottomYear:[],
+})
+onBeforeMount(() => {
+  getData();
 });
-const getPie1 = () => {
+const getData = () => {
   http.get("/api/ggfwyth/yl").then((res) => {
     if (res.code == 200) {
       console.log(res.data);
+      res.data.endowmentInsurance.ffrc.forEach(element => {
+        data.leftTop1.push(element.zgffrc)
+        data.leftTop2.push(element.cxffrc)
+      });
+      res.data.endowmentInsurance.ffje.forEach(element => {
+        data.leftTop3.push(element.zgffje)
+        data.leftTop4.push(element.cxffje)
+      });
+      data.leftTopYear = res.data.endowmentInsurance.year
     }
   });
 };