diff --git a/src/assets/images/sjfx/enrol/title1.png b/src/assets/images/sjfx/enrol/title1.png
new file mode 100644
index 0000000..52ae30c
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title1.png differ
diff --git a/src/assets/images/sjfx/enrol/title2.png b/src/assets/images/sjfx/enrol/title2.png
new file mode 100644
index 0000000..6146fd4
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title2.png differ
diff --git a/src/assets/images/sjfx/enrol/title3.png b/src/assets/images/sjfx/enrol/title3.png
new file mode 100644
index 0000000..a59b607
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title3.png differ
diff --git a/src/assets/images/sjfx/enrol/title4.png b/src/assets/images/sjfx/enrol/title4.png
new file mode 100644
index 0000000..33367bb
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title4.png differ
diff --git a/src/assets/images/sjfx/enrol/title5.png b/src/assets/images/sjfx/enrol/title5.png
new file mode 100644
index 0000000..7d43a06
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title5.png differ
diff --git a/src/assets/images/sjfx/enrol/title6.png b/src/assets/images/sjfx/enrol/title6.png
new file mode 100644
index 0000000..4deed8a
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title6.png differ
diff --git a/src/assets/images/sjfx/enrol/title7.png b/src/assets/images/sjfx/enrol/title7.png
new file mode 100644
index 0000000..e3fb8b9
Binary files /dev/null and b/src/assets/images/sjfx/enrol/title7.png differ
diff --git a/src/view/analyze.vue b/src/view/analyze.vue
index e690a13..e570cf6 100644
--- a/src/view/analyze.vue
+++ b/src/view/analyze.vue
@@ -125,7 +125,7 @@
         <right2 :list="data.analysis.push"></right2>
       </div>
       <div class="flex1">
-        <div class="yd_title right_3">
+        <div class="yd_title right_3" @click="showEnrol()">
           <div class="animate-border">
             <i></i>
             <i></i>
@@ -134,6 +134,12 @@
         <Map class="map"></Map>
       </div>
     </div>
+    <DialogEnrol
+      :dialogShowEnrol="dialogShowEnrol"
+      :dataEnrol="dataEnrol"
+      @close="close"
+    >
+    </DialogEnrol>
   </div>
 </template>
 
@@ -146,6 +152,7 @@ import {
   onBeforeUnmount,
   computed,
 } from "vue";
+import DialogEnrol from "./dialog/dialogEnrol.vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import jypx from "./echart_analyze/jypx.vue";
@@ -166,6 +173,99 @@ import jypx1 from "@/assets/images/sjfx/pxrc.png";
 import jypx2 from "@/assets/images/sjfx/gygws.png";
 import Map from "./echart_analyze/map.vue";
 const showR = ref(false); //loading
+// 入学分析数据
+const dialogShowEnrol = ref(false)
+const dataTab = reactive({
+  url: "",
+  title: "",
+  list1: [],
+  list2: [],
+  year: [],
+  columns: [
+    {
+      label: "班次",
+      property: "cc",
+    },
+    {
+      label: "始发站-终点站",
+      property: "qqz",
+    },
+    {
+      label: "到达龙游站时间",
+      type: "slot",
+      property: "dd",
+    },
+  ],
+  data: [],
+});
+const dataEnrol = reactive({
+  title: "入学分析",
+  // 幼儿园名称
+  kidName: ['第一幼儿园','第二幼儿园','第三幼儿园','第四幼儿园','第五幼儿园','第六幼儿园','第七幼儿园','第八幼儿园'],
+  // 托班
+  kidZs1: [100,105,369,523,651,225,664,245],
+  kidBm1: [100,105,369,523,651,225,664,245],
+  // 小班
+  kidZs2: [100,105,369,523,651,225,664,245],
+  kidBm2: [100,105,369,523,651,225,664,245],
+  // 中班
+  kidZs3: [100,105,369,523,651,225,664,245],
+  kidBm3: [100,105,369,523,651,225,664,245],
+  // 大班
+  kidZs4: [100,105,369,523,651,225,664,245],
+  kidBm4: [100,105,369,523,651,225,664,245],
+  // 小学
+  primaryName: ['第一小学','第二小学','第三小学','第四小学','第五小学','第六小学'],
+  primaryZs: [231,544,343,444,335,632],
+  primaryBm: [231,544,343,444,335,632],
+  // 初中
+  middleName: ['第一初中','第二初中','第三初中','第四初中'],
+  middleZs: [231,544,343,444],
+  // 高中
+  highName: ['第一高中','第二高中','第三高中'],
+  highZs: [231,335,632],
+  // 学校历年匹配
+  schoolNmae: [
+    {
+      name: '第一小学',
+      id: 0,
+    },
+    {
+      name: '第一初中',
+      id: 1,
+    },
+    {
+      name: '第一高中',
+      id: 2,
+    },
+    ],
+  schoolYear: [2022,2023,2024],
+  schoolData: [
+    {
+      id: 0,
+      bm: [335,654,365],
+      zs: [335,654,521],
+    },
+    {
+      id: 1,
+      zs: [335,654,521],
+    },
+    {
+      id: 2,
+      zs: [355,652,721],
+    },
+  ]
+})
+
+const showEnrol = () => {
+  dialogShowEnrol.value = true
+}
+const close = () => {
+  dialogShowEnrol.value
+};
+
+
+
 //就业培训
 const jypxList = reactive([
   {
diff --git a/src/view/dialog/dialogEnrol.vue b/src/view/dialog/dialogEnrol.vue
new file mode 100644
index 0000000..7097fac
--- /dev/null
+++ b/src/view/dialog/dialogEnrol.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowEnrol"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ data.dataEnrol.title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="tabChoose">
+          <div :class="data.tab == '0' ? 'choosed' : 'tabs'">
+            <span @click="changeTab('0')">城区幼儿园招生情况</span>
+          </div>
+          <div :class="data.tab == '1' ? 'choosed' : 'tabs'">
+            <span @click="changeTab('1')">城区义务教育</span>
+          </div>
+          <div :class="data.tab == '2' ? 'choosed' : 'tabs'">
+            <span @click="changeTab('2')">学校历年匹配情况</span>
+          </div>
+        </div>
+        <div
+          v-if="data.tab == '0'"
+          style="width: 100%; height: 700px; overflow: hidden;"
+        >
+          <div style="width: 49%; height: 350px; float: left;position: relative;">
+            <div class="titleSmall1"></div>
+            <zsbm
+              :list1="data.dataEnrol.kidZs1"
+              :list2="data.dataEnrol.kidBm1"
+              :year="data.dataEnrol.kidName"
+            ></zsbm>
+          </div>
+          <div style="width: 49%; height: 350px; float: right;position: relative;">
+            <div class="titleSmall2"></div>
+            <zsbm
+              :list1="data.dataEnrol.kidZs2"
+              :list2="data.dataEnrol.kidBm2"
+              :year="data.dataEnrol.kidName"
+            ></zsbm>
+          </div>
+          <div style="width: 49%; height: 350px; float: left;position: relative;">
+            <div class="titleSmall3"></div>
+            <zsbm
+              :list1="data.dataEnrol.kidZs3"
+              :list2="data.dataEnrol.kidBm3"
+              :year="data.dataEnrol.kidName"
+            ></zsbm>
+          </div>
+          <div style="width: 49%; height: 350px; float: right;position: relative;">
+            <div class="titleSmall4"></div>
+            <zsbm
+              :list1="data.dataEnrol.kidZs4"
+              :list2="data.dataEnrol.kidBm4"
+              :year="data.dataEnrol.kidName"
+            ></zsbm>
+          </div>
+        </div>
+        <div
+          v-else-if="data.tab == '1'"
+          style="width: 100%; height: 700px; overflow: hidden;"
+        >
+          <div style="width: 49%; height: 350px; float: left;position: relative;">
+            <div class="titleSmall5"></div>
+            <zsbm
+              :list1="data.dataEnrol.primaryZs"
+              :list2="data.dataEnrol.primaryBm"
+              :year="data.dataEnrol.primaryName"
+            ></zsbm>
+          </div>
+          <div style="width: 49%; height: 350px; float: right;position: relative;">
+            <div class="titleSmall6"></div>
+            <zs
+              :list1="data.dataEnrol.middleZs"
+              :year="data.dataEnrol.middleName"
+            ></zs>
+          </div>
+          <div style="width: 49%; height: 350px; float: left;position: relative;">
+            <div class="titleSmall7"></div>
+            <zs
+              :list1="data.dataEnrol.highZs"
+              :year="data.dataEnrol.highName"
+            ></zs>
+          </div>
+        </div>
+        <div
+          v-else-if="data.tab == '2'"
+          style="width: 100%; height: 700px; overflow: hidden;"
+        >
+          <div class="selectLint">
+            <div class="selectBox">
+              <el-select
+                v-model="data.value1"
+                placeholder="请选择"
+                size="large"
+                @change="selectChange1"
+              >
+                <el-option
+                  v-for="item in data.dataEnrol.schoolNmae"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </div>
+          </div>
+          <div style="width: 86%; margin-left:7%; height: 600px; overflow: hidden;" v-if="data.pickNum == 0">
+            <pick1
+              :list1="data.selectList1"
+              :list2="data.selectList2"
+              :year="data.dataEnrol.schoolYear"
+            ></pick1>
+          </div>
+          <div style="width: 86%; margin-left:7%; height: 600px; overflow: hidden;" v-else-if="data.pickNum == 1">
+            <pick2
+              :list1="data.selectList1"
+              :year="data.dataEnrol.schoolYear"
+            ></pick2>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import zs from "./echarts/echartsZs.vue"
+import zsbm from "./echarts/echartZsbm.vue"
+import pick1 from "./echarts/echartPick1.vue"
+import pick2 from "./echarts/echartPick2.vue"
+const props = defineProps({
+  dialogShowEnrol: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  dataEnrol: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShowEnrol = ref();
+const data = reactive({
+  dataEnrol: {},
+  tab: "0",
+  value1: '',
+  selectList1: [],
+  selectList2: [],
+  pickNum: 0,
+});
+
+// 监听
+watch(
+  () => props.dialogShowEnrol,
+  (newVal, oldVal) => {
+    dialogShowEnrol.value = newVal;
+  }
+);
+watch(
+  () => props.dataEnrol,
+  (newVal, oldVal) => {
+    data.dataEnrol = props.dataEnrol;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  dialogShowEnrol.value = props.dialogShowEnrol;
+  data.dataEnrol = props.dataEnrol;
+  data.value1 = data.dataEnrol.schoolNmae[0].name
+  selectChange1(0)
+});
+
+const closeDialog = () => {
+  dialogShowEnrol.value = false;
+  emit("close");
+};
+const changeTab = (val) => {
+  data.tab = val;
+};
+const selectChange1 = (e) => {
+  if (data.dataEnrol.schoolData[e] && data.dataEnrol.schoolData[e].bm) {
+    data.pickNum = 0
+    data.selectList1 = data.dataEnrol.schoolData[e].zs
+    data.selectList2 = data.dataEnrol.schoolData[e].bm
+  } else {
+    data.pickNum = 1
+    data.selectList1 = data.dataEnrol.schoolData[e].zs
+  }
+};
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+  --el-dialog-margin-top: 7vh;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+
+  .tabChoose {
+    width: 100%;
+    margin-bottom: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 20px;
+      line-height: 36px;
+      cursor: pointer;
+    }
+    .tabs {
+      width: 252px;
+      text-align: center;
+      font-size: 20px;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 29px;
+      letter-spacing: 2px;
+      text-shadow: 0px 2px 4px #00405f;
+    }
+    .choosed {
+      width: 252px;
+      text-align: center;
+      font-size: 20px;
+      color: #fff;
+      line-height: 29px;
+      letter-spacing: 2px;
+      text-shadow: 0px 2px 4px #00405f,
+        inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+      background-image: url(@/assets/dialogTab.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+.titleSmall1 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall2 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall3 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall4 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title4.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall5 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title5.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall6 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title6.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.titleSmall7 {
+  position: absolute;
+  width: 350px;
+  height: 30px;
+  left: 10%;
+  background-image: url(@/assets/images/sjfx/enrol/title7.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.selectLint {
+  width: 94%;
+  display: flex;
+  margin: 30px 0 10px;
+  justify-content: space-between;
+
+  .selectBox {
+    width: 48%;
+    background-image: url(@/assets/eduImg/jyImg7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>
diff --git a/src/view/dialog/echarts/echartPick1.vue b/src/view/dialog/echarts/echartPick1.vue
new file mode 100644
index 0000000..baac318
--- /dev/null
+++ b/src/view/dialog/echarts/echartPick1.vue
@@ -0,0 +1,306 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref, watch } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+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: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}",
+    },
+    legend: {
+      data: ["招生人数", "报名人数"],
+      top: "10%",
+      right: "center",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "25%",
+      left: "10%",
+      right: "10%",
+      bottom: "10%",
+      containLabel: true,
+    },
+
+    xAxis: [{
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        show: false,
+      },
+    },],
+    yAxis: [
+      {
+        type: "value",
+        name: "招生人数",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        type: "value",
+        name: "报名人数",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.6) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 2,
+        data: data.bg,
+        barWidth: "50%",
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "招生人数",
+        type: "bar",
+        barWidth: "50%",
+        itemStyle: {
+          borderWidth: 1,
+          color:  new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
+                [
+                    {offset: 0.2, color: 'rgba(23,237,255,0.8)'},   // 0% 处的颜色
+                    {offset: 1, color: 'rgba(23,237,255,0.2)'}   // 100% 处的颜色
+                ]
+            ),
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+      {
+        yAxisIndex: 1,
+        name: "报名人数",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#FFD550",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        data: data.list2,
+      },
+    ],
+  };
+};
+watch(
+  () => props.list1,
+  () => {
+    data.list1 = props.list1;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.list2,
+  () => {
+    data.list2 = props.list2;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.year,
+  () => {
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }
+);
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/dialog/echarts/echartPick2.vue b/src/view/dialog/echarts/echartPick2.vue
new file mode 100644
index 0000000..8d8eae3
--- /dev/null
+++ b/src/view/dialog/echarts/echartPick2.vue
@@ -0,0 +1,232 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref, watch } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const data = reactive({
+  list1: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a0}:{c0}",
+    },
+    legend: {
+      data: ["招生人数"],
+      top: "10%",
+      right: "center",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "25%",
+      left: "10%",
+      right: "10%",
+      bottom: "10%",
+      containLabel: true,
+    },
+
+    xAxis: [{
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+        // interval: 0,
+        // rotate: 45, //代表逆时针旋转45度
+      },
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        show: false,
+      },
+    },],
+    yAxis: [
+      {
+        type: "value",
+        name: "招生人数",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: data.bg,
+        barWidth: "50%",
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "招生人数",
+        type: "bar",
+        barWidth: "50%",
+        itemStyle: {
+          borderWidth: 1,
+          color:  new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
+                [
+                    {offset: 0.2, color: 'rgba(23,237,255,0.8)'},   // 0% 处的颜色
+                    {offset: 1, color: 'rgba(23,237,255,0.2)'}   // 100% 处的颜色
+                ]
+            ),
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+    ],
+  };
+};
+watch(
+  () => props.list1,
+  () => {
+    data.list1 = props.list1;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.year,
+  () => {
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }
+);
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/dialog/echarts/echartZsbm.vue b/src/view/dialog/echarts/echartZsbm.vue
new file mode 100644
index 0000000..c205161
--- /dev/null
+++ b/src/view/dialog/echarts/echartZsbm.vue
@@ -0,0 +1,308 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref, watch } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+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: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}",
+    },
+    legend: {
+      data: ["招生人数", "报名人数"],
+      top: "0%",
+      right: "10%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "25%",
+      left: "10%",
+      right: "10%",
+      bottom: "10%",
+      containLabel: true,
+    },
+
+    xAxis: [{
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+        interval: 0,
+        rotate: 45, //代表逆时针旋转45度
+      },
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        show: false,
+      },
+    },],
+    yAxis: [
+      {
+        type: "value",
+        name: "招生人数",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        type: "value",
+        name: "报名人数",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.6) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+
+    series: [
+    //   {
+    //     name: "背景",
+    //     type: "bar",
+    //     xAxisIndex: 1,
+    //     yAxisIndex: 2,
+    //     data: data.bg,
+    //     barWidth: "40%",
+    //     showBackground: true,
+    //     backgroundStyle: {
+    //       color: "rgba(180, 180, 180, 0.2)",
+    //     },
+    //   },
+      {
+        name: "招生人数",
+        type: "bar",
+        barWidth: "50%",
+        itemStyle: {
+          borderWidth: 1,
+          color:  new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
+                [
+                    {offset: 0.2, color: 'rgba(23,237,255,0.8)'},   // 0% 处的颜色
+                    {offset: 1, color: 'rgba(23,237,255,0.2)'}   // 100% 处的颜色
+                ]
+            ),
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+      {
+        yAxisIndex: 1,
+        name: "报名人数",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#FFD550",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        data: data.list2,
+      },
+    ],
+  };
+};
+watch(
+  () => props.list1,
+  () => {
+    data.list1 = props.list1;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.list2,
+  () => {
+    data.list2 = props.list2;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.year,
+  () => {
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }
+);
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/dialog/echarts/echartsZs.vue b/src/view/dialog/echarts/echartsZs.vue
new file mode 100644
index 0000000..af8ee8f
--- /dev/null
+++ b/src/view/dialog/echarts/echartsZs.vue
@@ -0,0 +1,232 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: 100%"
+  ></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref, watch } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const data = reactive({
+  list1: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a0}:{c0}",
+    },
+    legend: {
+      data: ["招生人数"],
+      top: "0%",
+      right: "10%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "25%",
+      left: "10%",
+      right: "10%",
+      bottom: "10%",
+      containLabel: true,
+    },
+
+    xAxis: [{
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+        // interval: 0,
+        // rotate: 45, //代表逆时针旋转45度
+      },
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        show: false,
+      },
+    },],
+    yAxis: [
+      {
+        type: "value",
+        name: "招生人数",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+
+    series: [
+    //   {
+    //     name: "背景",
+    //     type: "bar",
+    //     xAxisIndex: 1,
+    //     yAxisIndex: 2,
+    //     data: data.bg,
+    //     barWidth: "40%",
+    //     showBackground: true,
+    //     backgroundStyle: {
+    //       color: "rgba(180, 180, 180, 0.2)",
+    //     },
+    //   },
+      {
+        name: "招生人数",
+        type: "bar",
+        barWidth: "50%",
+        itemStyle: {
+          borderWidth: 1,
+          color:  new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
+                [
+                    {offset: 0.2, color: 'rgba(23,237,255,0.8)'},   // 0% 处的颜色
+                    {offset: 1, color: 'rgba(23,237,255,0.2)'}   // 100% 处的颜色
+                ]
+            ),
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: '16px',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+    ],
+  };
+};
+watch(
+  () => props.list1,
+  () => {
+    data.list1 = props.list1;
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.year,
+  () => {
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }
+);
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.year = props.year;
+    data.bg = [];
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file