diff --git a/src/view/echarts_education/edCSR.vue b/src/view/echarts_education/edCSR.vue
index e402dd3..4497828 100644
--- a/src/view/echarts_education/edCSR.vue
+++ b/src/view/echarts_education/edCSR.vue
@@ -41,7 +41,7 @@ const color = [
 const option = {
   tooltip: {
     trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    formatter: "{b0}:{c0}",
     axisPointer: {
       type: "cross",
       label: {
diff --git a/src/view/echarts_education/edXX.vue b/src/view/echarts_education/edXX.vue
index c7f94f2..150306d 100644
--- a/src/view/echarts_education/edXX.vue
+++ b/src/view/echarts_education/edXX.vue
@@ -1,19 +1,119 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 50%; min-height: 205px"></div>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 126px); min-height: 205px"
+  ></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  defineProps,
+  onBeforeMount,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  active: {
+    type: String,
+    default: () => {
+      return [];
+    },
+  },
+});
+
 const chart = ref(); // 创建DOM引用
 
-const datas = {
+const data = reactive({
+  list: [],
+  option: {},
   value: 18,
-//   text: "留 守 儿 童",
-};
+  namea:'',
+});
 
+// const datas = {
+//   value: 18,
+// };
+var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
+const getOption = () => {
+  data.option = {
+    color: colors,
+    // legend: {
+    //   orient: "vertical",
+    //   top: "center",
+    //   right: "6%",
+    //   icon: "circle",
+    //   itemGap: 20,
+    //   itemWidth: 10,
+    //   itemHeight: 10,
+    //   textStyle: {
+    //     color: "#fff",
+    //     fontSize: 18,
+    //   },
+    // //   formatter: function (name) {
+    // //     var target;
+    // //     for (var i = 0, l = data.list.length; i < l; i++) {
+    // //       if (data.list[i].name == name) {
+    // //         target = data.list[i].value;
+    // //       }
+    // //     }
+    // //     return `   ${name}        ${target} `;
+    // //   },
+    // },
+    
+    tooltip: {
+      trigger: "item",
+    //   formatter: "{a} <br/>{b} : {c} ({d}%)",
+    },
+    series: [
+      /*内心原型图，展示整体数据概览*/
+      {
+        name: "测评分析",
+        type: "pie",
+        radius: ["20%", "70%"],
+        center: ["30%", "50%"],
+        roseType: "radius",
+        minShowLabelAngle: 30,
+        label: {
+          show: false,
+        },
+        data: data.list,
+      },
+      // 内圈背景
+      {
+        type: "pie",
+        center: ["30%", "50%"],
+        radius: ["20%", "26%"],
+        hoverAnimation: false,
+        clockWise: false,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(193, 229, 255, .1)",
+            color: "rgba(14, 59, 123, 0.60)",
+          },
+        },
+        tooltip: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        data: [100],
+      },
+    ],
+  };
+};
 let option = {
   legend: {
     bottom: 10,
@@ -21,7 +121,7 @@ let option = {
     data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
   },
   tooltip: {
-    trigger: 'item'
+    trigger: "item",
   },
   series: [
     // 外圈背景
@@ -57,84 +157,46 @@ let option = {
     },
     /*内心原型图，展示整体数据概览*/
     {
-      name: "pie",
+      name: "城镇",
       type: "pie",
       roundCap: true,
       clockWise: true,
       startAngle: 180,
       labelLine: {
-        show: false,
+        show: true, //数据标签引导线
+        // length: 30,
+        lineStyle: {
+          width: 1,
+          type: "solid",
+          color: "#fffdef",
+        },
       },
-      radius: ["50%", "70%"],
+      label: {
+        //文字部分 显示内容为{b}：{c}可以换自己像显示的
+        //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
+        //{hr|}为圆点显示内容
+        formatter: "{a|{b}：{c}}\n{hr|}",
+        //折线图文字颜色
+        color: "#fffdef",
+        rich: {
+          //圆点位置大小配置
+          hr: {
+            //auto自定义
+            backgroundColor: "auto",
+            borderRadius: 3,
+            width: 3,
+            height: 3,
+            padding: [3, 3, 0, -12],
+          },
+          a: {
+            padding: [-12, 10, -20, 15],
+          },
+        },
+      },
+      radius: ["30%", "60%"],
       hoverAnimation: false,
       center: ["50%", "50%"],
       data: [
-        // {
-        //   value: datas.value,
-        //   label: {
-        //     normal: {
-        //       // formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
-        //       position: "center",
-        //       show: true,
-        //       textStyle: {
-        //         fontSize: "24",
-        //         fontWeight: "normal",
-        //         color: "#fff",
-        //         lineHeight: 30,
-        //         rich: {
-        //           cell: {
-        //             fontSize: "24",
-        //             fontWeight: "normal",
-        //             color: "#fff",
-        //           },
-        //           text: {
-        //             fontSize: 16,
-        //             fontFamily: "FZLanTingHeiS-L-GB",
-        //             color: "#fff",
-        //           },
-        //         },
-        //       },
-        //     },
-        //   },
-        //   itemStyle: {
-        //     normal: {
-        //       color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-        //         {
-        //           offset: 0,
-        //           color: "rgba(0, 255, 250, 0.29)",
-        //         },
-        //         {
-        //           offset: 0.5,
-        //           color: "rgba(0, 255, 250, 0.8)",
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: "rgba(0, 255, 250, 1)",
-        //         },
-        //       ]),
-        //       shadowColor: "rgba(1,1,1,0.5)",
-        //       shadowBlur: 1,
-        //     },
-        //   },
-        // },
-        // {
-        //   value: 100 - datas.value,
-        //   name: "",
-        //   itemStyle: {
-        //     normal: {
-        //       color: "#095b9b", // 未完成的圆环的颜色
-        //       label: {
-        //         show: false,
-        //       },
-        //       labelLine: {
-        //         show: false,
-        //       },
-        //     },
-        //     emphasis: {
-        //       color: "#095b9b", // 未完成的圆环的颜色
-        //     },
-        //   },
-        // },
         { value: 44, name: "副高级" },
         { value: 44, name: "正高级" },
         { value: 44, name: "未定级" },
@@ -143,24 +205,64 @@ let option = {
         { value: 30, name: "助理级" },
       ],
     },
+
+    // {
+    //   name: "外边框",
+    //   type: "pie",
+    //   clockWise: false, //顺时加载
+    //   hoverAnimation: false, //鼠标移入变大
+    //   center: ["50%", "50%"],
+    //   radius: ["75%", "75%"],
+    //   label: {
+    //     normal: {
+    //       show: false,
+    //     },
+    //   },
+    //   data: [
+    //     {
+    //       value: 9,
+    //       name: "",
+    //       itemStyle: {
+    //         normal: {
+
+    //           borderWidth: 2,
+    //           borderColor: "#61bad3",
+    //         },
+    //       },
+    //     },
+    //   ],
+    // },
   ],
 };
 
-// 使用生命钩子
-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();
-  //   });
+watch(
+  () => props.list,
+  (newVal, oldVal) => {
+    data.list = newVal;
+    getOption();
+    setChart();
+    console.log("学校", newVal, oldVal);
+  }
+);
+
+// 使用生命钩子
+onMounted(() => {
+    console.log("学校11", props.list,props.active);
+  data.list = props.list;
+  data.namea = props.active;
+
+  getOption();
+  setChart();
+
+  //   var myChart = echarts.init(chart.value);
+  //   myChart.setOption(option);
 });
 </script>
 
diff --git a/src/view/education.vue b/src/view/education.vue
index c1cd723..6d4ff39 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -112,16 +112,25 @@
         >
           <edie></edie>
           <div class="rating">
-            <edXX></edXX>
+            <edXX :list="selectData.list1" :active="selectData.active "></edXX>
             <div class="ratingBtn">
-              <div class="onImg" id="img1">
-                <span>城市</span>
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '城市' }"
+              >
+                <span @click="ratingBtn('城市')">城市</span>
               </div>
-              <div class="onImg">
-                <span>县镇</span>
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '县镇' }"
+              >
+                <span @click="ratingBtn('县镇')">县镇</span>
               </div>
-              <div class="onImg">
-                <span>农村</span>
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '农村' }"
+              >
+                <span @click="ratingBtn('农村')">农村</span>
               </div>
             </div>
           </div>
@@ -259,6 +268,8 @@ const selectData = reactive({
     },
   ],
   list: [],
+  active: "城市",
+  list1: [],
 });
 var roseData1 = ref([
   {
@@ -326,6 +337,31 @@ var roseData3 = ref([
     value: 78,
   },
 ]);
+var schoolData = ref([
+  { name: "副高级", value: 44 },
+  { name: "正高级", value: 22 },
+  { name: "未定级", value: 11 },
+  { name: "员级", value: 12 },
+  { name: "中级", value: 54 },
+  { name: "助理级", value: 74 },
+]);
+var schoolData1 = ref([
+  { name: "副高级", value: 11 },
+  { name: "正高级", value: 22 },
+  { name: "未定级", value: 11 },
+  { name: "员级", value: 12 },
+  { name: "中级", value: 22 },
+  { name: "助理级", value: 74 },
+]);
+var schoolData2 = ref([
+  { name: "副高级", value: 22 },
+  { name: "正高级", value: 22 },
+  { name: "未定级", value: 11 },
+  { name: "员级", value: 33 },
+  { name: "中级", value: 54 },
+  { name: "助理级", value: 74 },
+]);
+
 const selectChange1 = () => {
   if (selectData.value1 == "111") {
     selectData.list = roseData1.value;
@@ -337,8 +373,25 @@ const selectChange1 = () => {
     selectData.list = roseData1.value;
   }
 };
+const ratingBtn = (item) => {
+  selectData.active = item; // 设置当前选中的项目
+  switch (selectData.active) {
+    case "城市":
+      selectData.list1 = schoolData.value;
+      break;
+    case "县镇":
+      selectData.list1 = schoolData1.value;
+      break;
+    case "农村":
+      selectData.list1 = schoolData2.value;
+      break;
+    default:
+      break;
+  }
+};
 onBeforeMount(() => {
   selectData.list = roseData1.value;
+  selectData.list1 = schoolData.value;
 });
 </script>
 
@@ -1050,13 +1103,7 @@ onBeforeMount(() => {
   .ratingBtn {
     display: flex;
     // align-items: center;
-    .ratingImg {
-      width: 62px;
-      height: 29px;
-      background-image: url(@/assets/eduImg/jyImg18.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
+
     .onImg {
       width: 62px;
       height: 29px;
@@ -1065,6 +1112,14 @@ onBeforeMount(() => {
       background-size: 100% 100%;
       cursor: pointer; /* 添加指针样式以指示可点击 */
     }
+
+    .ratingImg {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg18.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
     .onImg.active {
       width: 62px;
       height: 29px;