From ef8b9f73cdf31dc98ec1d56236265c9f9f4feca5 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 14 May 2024 10:00:40 +0800
Subject: [PATCH] gx

---
 src/view/echarts_education/eP1.vue  | 354 ++++++++++++++++------------
 src/view/echarts_education/edXX.vue |  15 +-
 src/view/echarts_education/pie.vue  | 331 +++++++++++++-------------
 src/view/education.vue              | 175 ++++++++++----
 src/view/yl.vue                     |   1 +
 5 files changed, 503 insertions(+), 373 deletions(-)

diff --git a/src/view/echarts_education/eP1.vue b/src/view/echarts_education/eP1.vue
index 1f520a6..2c73aee 100644
--- a/src/view/echarts_education/eP1.vue
+++ b/src/view/echarts_education/eP1.vue
@@ -3,10 +3,33 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onMounted,
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
+// 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [],
+  list1: [],
+  option: {},
+});
+
 // const data = [150, 230, 224, 218, 135, 147];
 const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
 const data2 = [
@@ -18,176 +41,193 @@ const data2 = [
   "10000人",
 ];
 
-const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
-const newMaxNumber = Math.max(...newData2) * 1.05;
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+const setChart1 = () => {
+data.list1 = data.list.map((item) => `${item}人`);
+//   const newData2 = data.list.map((item) => parseInt(item.replace("人", "")));
+//   data.list1 = Math.max(...newData2) * 1.05;
+//   const newMaxNumber = Math.max(...newData2) * 1.05;
+};
 
-const option = {
-  grid: {
-    top: "6%",
-    left: "9%",
-    right: "10%",
-    bottom: "0%",
-    containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
-  },
-  tooltip: {
-    show: true, //---是否显示提示框,默认为true
-    trigger: "axis",
-    formatter: "{b0}:{c1}" + "人",
-  },
-  xAxis: [
-    {
-      type: "value",
-      scale: false,
-      max: newMaxNumber,
-      axisLabel: {
-        //坐标轴分割线
-        show: false,
-        textStyle: {
-          color: "#ffffff",
+const getOption = () => {
+  data.option = {
+    grid: {
+      top: "6%",
+      left: "9%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
+    },
+    tooltip: {
+      show: true, //---是否显示提示框,默认为true
+      trigger: "axis",
+      formatter: "{b0}:{c1}" + "人",
+    },
+    xAxis: [
+      {
+        type: "value",
+        scale: false,
+        max: data.list,
+        axisLabel: {
+          //坐标轴分割线
+          show: false,
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false, // 取消x轴线
+        },
+        splitLine: {
+          show: false, //---grid 区域中的分隔线
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
         },
       },
-      axisLine: {
-        //y轴线的颜色以及宽度
-        show: false, // 取消x轴线
+    ],
+    yAxis: [
+      {
+        type: "category",
+        scale: true,
+        // name: "时长/小时",
+        // max: data.length,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            width: 1,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        axisLine: {
+          //分割线配置
+          show: false,
+          // lineStyle: {
+          //   color: "#ffffff",
+          //   width: 1,
+          //   type: "solid",
+          // },
+        },
+        data: data1,
       },
-      splitLine: {
-        show: false, //---grid 区域中的分隔线
+      {
+        type: "category",
+        show: true,
+        position: "right",
+        axisLine: {
+          //---坐标轴 轴线
+          show: false, // 取消轴线
+        },
+        axisLabel: {
+          //---坐标轴 标签
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: data.list1,
       },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-    },
-  ],
-  yAxis: [
-    {
-      type: "category",
-      scale: true,
-      // name: "时长/小时",
-      // max: data.length,
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          width: 1,
+    ],
+    series: [
+      {
+        type: "bar",
+        data: data.list.map(() => Math.max(...data.list) * 1.05), // 外阴影铺满整个柱状图
+        // barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
+        yAxisIndex: 1,
+        barWidth: 30, //外阴影背景宽
+        silent: true, // 不响应事件
+        itemStyle: {
+          color: "rgba(0, 230, 255, 0.1)", //外阴影背景
         },
       },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-      axisLabel: {
-        //y轴文字的配置
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-      axisLine: {
-        //分割线配置
-        show: false,
-        // lineStyle: {
-        //   color: "#ffffff",
-        //   width: 1,
-        //   type: "solid",
-        // },
-      },
-      data: data1,
-    },
-    {
-      type: "category",
-      show: true,
-      position: "right",
-      axisLine: {
-        //---坐标轴 轴线
-        show: false, // 取消轴线
-      },
-      axisLabel: {
-        //---坐标轴 标签
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-      data: data2,
-    },
-  ],
-  series: [
-    {
-      type: "bar",
-      data: newData2.map(() => Math.max(...newData2) * 1.05), // 外阴影铺满整个柱状图
-      // barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
-      yAxisIndex: 1,
-      barWidth: 30, //外阴影背景宽
-      silent: true, // 不响应事件
-      itemStyle: {
-        color: "rgba(0, 230, 255, 0.1)", //外阴影背景
-      },
-    },
-    {
-      type: "bar",
-      data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图
-      barWidth: 8, //外阴影背景宽
-      silent: true, // 不响应事件
-      itemStyle: {
-        normal: {
-          // borderColor: "rgba(0, 183, 255, 1)",
-          borderRadius: [0, 50, 50, 0], //圆角边框
-          // color: "rgba(94, 178, 188, 0.3)", //外阴影背景
+      {
+        type: "bar",
+        data: data.list.map(() => Math.max(...data.list) * 1.02), // 外阴影铺满整个柱状图
+        barWidth: 8, //外阴影背景宽
+        silent: true, // 不响应事件
+        itemStyle: {
+          normal: {
+            // borderColor: "rgba(0, 183, 255, 1)",
+            borderRadius: [0, 50, 50, 0], //圆角边框
+            // color: "rgba(94, 178, 188, 0.3)", //外阴影背景
 
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: "rgba(94, 178, 188, 0)" },
-            { offset: 1, color: "rgba(94, 178, 188, 0.3)" },
-          ]),
-        },
-      },
-    },
-    {
-      type: "bar",
-      data: newData2,
-      barWidth: 7, //柱宽
-      barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            var colorList = [
-              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "rgba(0, 230, 255, 0)" },
-                { offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
-                { offset: 1, color: "rgba(0, 230, 255, 1)" },
-              ]),
-              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "rgba(0, 255, 208,0)" },
-                { offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
-                { offset: 1, color: "rgba(0, 255, 208,1)" },
-              ]),
-              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "rgba(255, 234, 90, 0)" },
-                { offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
-                { offset: 1, color: "rgba(255, 234, 90, 1)" },
-              ]),
-            ];
-            return colorList[params.dataIndex % colorList.length];
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(94, 178, 188, 0)" },
+              { offset: 1, color: "rgba(94, 178, 188, 0.3)" },
+            ]),
           },
         },
       },
-      label: {
-        show: true,
-        width: 8,
-        height: 8,
-        borderRadius: 1000,
-        color: "rgba(0,0,0,0)",
-        shadowColor: "#00E6FF",
-        backgroundColor: "rgba(0, 230, 255, 1)",
-        position: ["99%", -0.4],
-        shadowBlur: 6,
+      {
+        type: "bar",
+        data: data.list,
+        barWidth: 7, //柱宽
+        barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(0, 230, 255, 0)" },
+                  { offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
+                  { offset: 1, color: "rgba(0, 230, 255, 1)" },
+                ]),
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(0, 255, 208,0)" },
+                  { offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
+                  { offset: 1, color: "rgba(0, 255, 208,1)" },
+                ]),
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "rgba(255, 234, 90, 0)" },
+                  { offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
+                  { offset: 1, color: "rgba(255, 234, 90, 1)" },
+                ]),
+              ];
+              return colorList[params.dataIndex % colorList.length];
+            },
+          },
+        },
+        label: {
+          show: true,
+          width: 8,
+          height: 8,
+          borderRadius: 1000,
+          color: "rgba(0,0,0,0)",
+          shadowColor: "#00E6FF",
+          backgroundColor: "rgba(0, 230, 255, 1)",
+          position: ["99%", -0.4],
+          shadowBlur: 6,
+        },
       },
-    },
-  ],
+    ],
+  };
 };
 
-onMounted(() => {
-  var myChart = echarts.init(chart.value);
-  myChart.setOption(option);
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    setChart1();
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_education/edXX.vue b/src/view/echarts_education/edXX.vue
index 9d5aac2..9a1c709 100644
--- a/src/view/echarts_education/edXX.vue
+++ b/src/view/echarts_education/edXX.vue
@@ -269,7 +269,7 @@ watch(
     data.list = newVal;
     getOption();
     setChart();
-    // console.log("学校", newVal, oldVal);
+    console.log("学校", newVal, oldVal);
   }
 );
 watch(
@@ -282,12 +282,13 @@ watch(
 );
 
 // 使用生命钩子
-onMounted(() => {
-  data.list = props.list;
-  data.namea = props.active;
-
-  getOption();
-  setChart();
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.namea = props.active;
+    getOption();
+    setChart();
+  }, 600);
 
   //   var myChart = echarts.init(chart.value);
   //   myChart.setOption(option);
diff --git a/src/view/echarts_education/pie.vue b/src/view/echarts_education/pie.vue
index e1cae38..12d4f88 100644
--- a/src/view/echarts_education/pie.vue
+++ b/src/view/echarts_education/pie.vue
@@ -1,187 +1,202 @@
 <template>
-  <div
-    ref="chart"
-    style="width: 50%;height: 280px"
-  ></div>
+  <div ref="chart" style="width: 50%; height: 280px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
 const chart = ref(); // 创建DOM引用
 
-let option = {
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ",
-  },
-  legend: {
-    top: "8%",
-    right: "11%",
-    textStyle: {
-      fontSize: 12,
-      color: "#ccc",
+const data = reactive({
+  list: [[], []],
+  option: {},
+});
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
     },
-  },
-  grid: {
-    left: "1%",
-    right: "10%",
-    bottom: "0%",
-    containLabel: true,
-  },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ccc",
+    legend: {
+      top: "8%",
+      right: "11%",
+      textStyle: {
+        fontSize: 12,
+        color: "#ccc",
+      },
+    },
+    grid: {
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ccc",
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: ["小学", "初中", "高中"],
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: ["小学", "初中", "高中"],
+        axisLabel: {
+          show: false,
         },
       },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-      data: ["小学", "初中", "高中"],
-    },
-    {
-      axisTick: false,
-      type: "category",
-      data: ["小学", "初中", "高中"],
-      axisLabel: {
-        show: false,
-      },
-    },
-  ],
+    ],
 
-  yAxis: [
-    {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
-          width: 1,
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ccc",
+          },
         },
       },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ccc",
+      {
+        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: 14,
+          fontFamily: "MicrosoftYaHei",
+          color: "#DEF1FF",
+          lineHeight: 19,
         },
       },
-    },
-    {
-      type: "value",
-      min: 0,
-      max: 100,
-      splitLine: {
-        show: false,
-        lineStyle: {
-          type: "solid",
-          color: "rgb(221, 242, 255,0.1)",
+    ],
+    series: [
+      // {
+      //   name: "城市",
+      //   type: "bar",
+      //   data: [2.0, 4.9, 7.0],
+      //   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.list[1],
+        barWidth: "18%",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(23, 136, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(23, 136, 255, 0.20)",
+            },
+          ]),
         },
       },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          type: "dotted",
+      {
+        name: "农村",
+        type: "bar",
+        data: data.list[0],
+        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)",
+            },
+          ]),
         },
       },
-      axisLabel: {
-        show: false,
-        fontSize: 14,
-        fontFamily: "MicrosoftYaHei",
-        color: "#DEF1FF",
-        lineHeight: 19,
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: ["2019", "2020", "2021"].map(() => 100),
+        barWidth: 70,
       },
-    },
-  ],
-  series: [
-    {
-      name: "城市",
-      type: "bar",
-      data: [2.0, 4.9, 7.0],
-      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],
-      barWidth: "18%",
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(23, 136, 255, 1)",
-          },
-          {
-            offset: 1,
-            color: "rgba(23, 136, 255, 0.20)",
-          },
-        ]),
-      },
-    },
-    {
-      name: "农村",
-      type: "bar",
-      data: [2.6, 5.9, 9.0],
-      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"].map(() => 100),
-      barWidth: 70,
-    },
-  ],
+    ],
+  };
 };
-
-// 使用生命钩子
-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);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+  myChart.setOption(data.option);
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    // data.list[0].push(data.list.ncxx.nccz);
+    // data.list[0].push(data.list.ncxx.ncgz);
+    // data.list[0].push(data.list.ncxx.ncxx);
+    // data.list[1].push(data.list.xzxx.xzcz);
+    // data.list[1].push(data.list.xzxx.xzgz);
+    // data.list[1].push(data.list.xzxx.xzxx);
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/education.vue b/src/view/education.vue
index bc0196b..7732c9a 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -3,7 +3,7 @@
     <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title left_1"></div>
-        <eP1></eP1>
+        <eP1 :list="data.xsql"></eP1>
         <div class="t_1"></div>
         <div class="t_2">
           <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
@@ -19,15 +19,33 @@
         <div class="yd_title left_2"></div>
         <div class="selectLint">
           <div class="selectBox">
-            <el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
-              <el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
-                :value="item.value" />
+            <el-select
+              v-model="selectData.value1"
+              placeholder="请选择"
+              size="large"
+              @change="selectChange1"
+            >
+              <el-option
+                v-for="item in selectData.options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </div>
           <div class="selectBox">
-            <el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
-              <el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
-                :value="item.value" />
+            <el-select
+              v-model="selectData.value2"
+              placeholder="请选择"
+              size="large"
+              @change="selectChange1"
+            >
+              <el-option
+                v-for="item in selectData.options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </div>
         </div>
@@ -44,38 +62,47 @@
               <span class="schoola1">学校总数</span>
             </div>
             <div class="schoola">
-              <span>{{ data.xxgk.xszs }}</span> <span class="schoola1">学生总数</span>
+              <span>{{ data.xxgk.xszs }}</span>
+              <span class="schoola1">学生总数</span>
             </div>
             <div class="schoola">
-              <span>{{ data.xxgk.bjzs }}</span> <span class="schoola1">班级总数</span>
+              <span>{{ data.xxgk.bjzs }}</span>
+              <span class="schoola1">班级总数</span>
             </div>
             <div class="schoola">
-              <span>{{ data.xxgk.jzgzs }}</span> <span class="schoola1">教职工总数</span>
+              <span>{{ data.xxgk.jzgzs }}</span>
+              <span class="schoola1">教职工总数</span>
             </div>
           </div>
           <div class="schoolb">
             <div class="grade">
               <div class="schoolbs">
-                <span class="spot">初中</span> <span>{{ data.xxgk.czxxsl }}</span>
+                <span class="spot">初中</span>
+                <span>{{ data.xxgk.czxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">高中</span> <span>{{ data.xxgk.gzxxsl }}</span>
+                <span class="spot">高中</span>
+                <span>{{ data.xxgk.gzxxsl }}</span>
               </div>
             </div>
             <div class="grade">
               <div class="schoolbs">
-                <span class="spot">小学</span> <span>{{ data.xxgk.xxxxsl }}</span>
+                <span class="spot">小学</span>
+                <span>{{ data.xxgk.xxxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">中职</span> <span>{{ data.xxgk.zzxxsl }}</span>
+                <span class="spot">中职</span>
+                <span>{{ data.xxgk.zzxxsl }}</span>
               </div>
             </div>
             <div class="grade grade1">
               <div class="schoolbs">
-                <span class="spot">幼儿园</span> <span>{{ data.xxgk.yeyxxsl }}</span>
+                <span class="spot">幼儿园</span>
+                <span>{{ data.xxgk.yeyxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">特殊教育</span> <span>{{ data.xxgk.tsjyxxsl }}</span>
+                <span class="spot">特殊教育</span>
+                <span>{{ data.xxgk.tsjyxxsl }}</span>
               </div>
             </div>
           </div>
@@ -83,17 +110,23 @@
       </div>
       <div class="flex1">
         <div style="width: 100%; display: flex; flex-wrap: wrap">
-          <edie></edie>
+          <edie :list="data.xzncxxsl"></edie>
           <div class="rating">
-            <edXX :list="selectData.list1" :active="selectData.active"></edXX>
+            <edXX :list="data.schoolData" :active="selectData.active"></edXX>
             <div class="ratingBtn">
-              <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
+              <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
                 <span @click="ratingBtn('城市')">城市</span>
-              </div>
-              <div class="onImg" :class="{ ratingImg: selectData.active === '县镇' }">
+              </div> -->
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '县镇' }"
+              >
                 <span @click="ratingBtn('县镇')">县镇</span>
               </div>
-              <div class="onImg" :class="{ ratingImg: selectData.active === '农村' }">
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '农村' }"
+              >
                 <span @click="ratingBtn('农村')">农村</span>
               </div>
             </div>
@@ -108,10 +141,14 @@
             <span>资助金额</span>
           </div>
           <div class="rolling">
-            <div v-for="(item, index) in 20" :key="index" class="fundingContent">
-              <span class="spot">幼儿资助</span>
-              <span class="spot">379人次</span>
-              <span class="spot">70.88</span>
+            <div
+              v-for="(item, index) in data.zzxm"
+              :key="index"
+              class="fundingContent"
+            >
+              <span class="spot">{{  item.zzxm }}</span>
+              <span class="spot">{{  item.zzsl }}</span>
+              <span class="spot">{{  item.zzje }}</span>
             </div>
           </div>
         </div>
@@ -230,7 +267,7 @@ const selectData = reactive({
     },
   ],
   list: [],
-  active: "城市",
+  active: "县镇",
   list1: [],
 });
 var roseData1 = ref([
@@ -338,14 +375,24 @@ const selectChange1 = () => {
 const ratingBtn = (item) => {
   selectData.active = item; // 设置当前选中的项目
   switch (selectData.active) {
-    case "城市":
-      selectData.list1 = schoolData.value;
-      break;
+    // case "城市":
+    //   selectData.list1 = schoolData.value;
+    //   break;
     case "县镇":
-      selectData.list1 = schoolData1.value;
+      data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
+      data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
+      data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
+      data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
+      data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
+      data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
       break;
     case "农村":
-      selectData.list1 = schoolData2.value;
+      data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
+      data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
+      data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
+      data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
+      data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
+      data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
       break;
     default:
       break;
@@ -375,26 +422,50 @@ const data = reactive({
       cls: "left4",
     },
   ],
-  xxgk: {}
-})
-onBeforeMount(() => {
-  selectData.list = roseData1.value;
-  selectData.list1 = schoolData.value;
-  http.get("/api/ggfwyth/education").then((res) => {
+  xxgk: {},
+  xzncjszcsl: [],
+  xzncxxsl: [[], []],
+  zzxm: [],
+  schoolData: [
+    { name: "副高级", value: "" },
+    { name: "正高级", value: "" },
+    { name: "未定级", value: "" },
+    { name: "员级", value: "" },
+    { name: "中级", value: "" },
+    { name: "助理级", value: "" },
+  ],
+});
+const getData = async () => {
+  await http.get("/api/ggfwyth/education").then((res) => {
     if (res.code == 200) {
-      data.xsql.push(res.data.xssl.zz)
-      data.xsql.push(res.data.xssl.gz)
-      data.xsql.push(res.data.xssl.cz)
-      data.xsql.push(res.data.xssl.xx)
-      data.xsql.push(res.data.xssl.yey)
-      data.xsql.push(res.data.xssl.tsjy)
-      data.zdgz[0].value = res.data.zdgz.lset
-      data.zdgz[1].value = res.data.zdgz.dszn
-      data.zdgz[2].value = res.data.zdgz.dqjt
-      data.zdgz[3].value = res.data.zdgz.xsdb
-      data.xxgk = res.data.xxgk
+      data.xsql.push(res.data.xssl.zz);
+      data.xsql.push(res.data.xssl.gz);
+      data.xsql.push(res.data.xssl.cz);
+      data.xsql.push(res.data.xssl.xx);
+      data.xsql.push(res.data.xssl.yey);
+      data.xsql.push(res.data.xssl.tsjy);
+      data.zdgz[0].value = res.data.zdgz.lset;
+      data.zdgz[1].value = res.data.zdgz.dszn;
+      data.zdgz[2].value = res.data.zdgz.dqjt;
+      data.zdgz[3].value = res.data.zdgz.xsdb;
+      data.xxgk = res.data.xxgk;
+
+      data.xzncjszcsl = res.data.xzncjszcsl;
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
+      data.zzxm = res.data.zzxm;
+      ratingBtn("县镇");
     }
   });
+};
+
+onBeforeMount(async () => {
+  selectData.list = roseData1.value;
+  getData();
 });
 </script>
 
@@ -1103,8 +1174,8 @@ onBeforeMount(() => {
       justify-content: space-around;
       margin-top: 10px;
       width: 93.2%;
-      height: 34px;
-      padding: 6px 0;
+      min-height: 34px;
+      padding: 8px 0;
       box-sizing: border-box;
       background-image: url(@/assets/eduImg/jyImg16.png);
 
@@ -1116,6 +1187,8 @@ onBeforeMount(() => {
         letter-spacing: 3px;
         text-align: left;
         font-style: normal;
+        width: 33%;
+        padding-left: 50px;
       }
     }
   }
diff --git a/src/view/yl.vue b/src/view/yl.vue
index ce921d4..5f1ba83 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -258,6 +258,7 @@ const data = reactive({
 onBeforeMount(() => {
   getData();
 });
+
 const getData = () => {
   http.get("/api/ggfwyth/yl").then((res) => {
     if (res.code == 200) {