gx

src/view/analyze.vue

@@ -150,11 +150,6 @@
           :year="data.list.year"
           v-if="showEchart"
         ></ePie4>
-        <!-- <ylXZZC
-          :list1="data.zccs1"
-          :list2="data.zccs2"
-          v-if="showEchart"
-        ></ylXZZC> -->
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -168,25 +163,48 @@
         <right1 :list="data.wjybrysl" v-if="showEchart"></right1>
       </div>
       <div class="flex1">
-        <div class="yd_title right_2">
+        <div
+          class="yd_title"
+          :class="tab_choose[0].choose == '信息推送' ? 'right_2' : 'right_2_1'"
+          @click="tab_change(0)"
+        >
           <div class="animate-border">
             <i></i>
             <i></i>
           </div>
         </div>
         <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
-        <right2 :list="data.analysis.push"></right2>
+        <right2
+          :list="data.analysis.push"
+          v-if="showEchart && tab_choose[0].choose == '信息推送'"
+        ></right2>
+        <ylXZZC
+          :list1="data.zccs1"
+          :list2="data.zccs2"
+          v-if="showEchart && tab_choose[0].choose == '一码通'"
+        ></ylXZZC>
       </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>
           </div>
         </div>
-        <Map class="map"></Map>
+        <div class="rxfx">
+          <rxfx v-if="showEchart"></rxfx>
+          <div class="historyimg">城区学龄招生情况</div>
+        </div>
+
+        <!-- <Map class="map"></Map> -->
       </div>
     </div>
+    <DialogEnrol
+      :dialogShowEnrol="dialogShowEnrol"
+      :dataEnrol="dataEnrol"
+      @close="close"
+    >
+    </DialogEnrol>
   </div>
 </template>
 
@@ -199,6 +217,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";
@@ -209,6 +228,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
 import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
+import rxfx from "./echart_analyze/rxfx.vue";
 import FlipClock from "./echart_analyze/FlipClock.vue";
 import ePie4 from "./echart_analyze/pie4.vue";
 
@@ -220,6 +240,128 @@ 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 = false;
+};
+
+//数据切换
+const tab_choose = ref([
+  {
+    choose: "信息推送",
+  },
+]);
+const tab_change = (index, name) => {
+  if (index == 0) {
+    if (tab_choose.value[index].choose == "信息推送") {
+      tab_choose.value[index].choose = "一码通";
+    } else {
+      tab_choose.value[index].choose = "信息推送";
+    }
+  }
+};
 //就业培训
 const jypxList = reactive([
   {
@@ -604,12 +746,20 @@ onBeforeUnmount(() => {
 }
 
 .right_2 {
-  background-image: url(@/assets/images/sjfx/xxts.png);
+  cursor: pointer;
+  background-image: url(@/assets/images/sjfx/tab_xxts.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.right_2_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/sjfx/tab_ymt.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
 .right_3 {
-  background-image: url(@/assets/images/sjfx/jtzk.png);
+  cursor: pointer;
+  background-image: url(@/assets/images/sjfx/rxfx.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
@@ -1003,4 +1153,21 @@ onBeforeUnmount(() => {
     }
   }
 }
+//入学分析
+.rxfx {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .historyimg {
+    margin-top: 15px;
+    padding: 0 25px;
+    background-image: url(@/assets/images/hygiene/xtgl_1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 21px;
+    letter-spacing: 2px;
+  }
+}
 </style>

src/view/dialog/dialogEnrol.vue

@@ -0,0 +1,479 @@
+<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: 86%;
+  display: flex;
+  margin: 30px 7% 10px;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+
+  .selectBox {
+    width: 25%;
+    background-image: url(@/assets/eduImg/jyImg7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>
+<style lang="scss">
+.selectBox {
+  .el-select--large .el-select__wrapper {
+    font-size: 18px !important;
+  }
+
+  .el-select__wrapper {
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+
+  .el-select__placeholder {
+    color: #fff !important;
+  }
+
+  .el-select__caret {
+    color: #fff !important;
+    font-size: 18px !important;
+  }
+}
+</style>

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: "5%",
+      right: "5%",
+      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>

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: "5%",
+      right: "5%",
+      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>

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>

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>

src/view/echart_analyze/right2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 96%; height: 240px"></div>
+  <div ref="chart" style="width: 96%; height: 220px"></div>
 </template>
 
 <script setup>
@@ -176,7 +176,7 @@ const getOption = () => {
       left: 10,
       right: 0,
       bottom: 20,
-      top: 30,
+      top: 40,
       containLabel: true,
     },
     xAxis: [

src/view/echart_analyze/rxfx.vue

@@ -0,0 +1,244 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 260px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  zss: [3136, 4345, 4964, 5846, 8076,8999,9999],
+  bms: [3860, 6980, 7585, 8858, 12737,13000,13333],
+  year: ['托班','小班','中班','大班','小学','初中','高中'],
+  option: {},
+  bg: [0, 0, 0, 0, 0, 0, 0],
+});
+
+const chart = ref(); // 创建DOM引用
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3}",
+    },
+    legend: {
+      data: ["招生数", "报名数"],
+      top: "6%",
+      right: "35%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "23%",
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        data: data.year,
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: data.year,
+        axisLabel: {
+          show: false,
+        },
+      },
+    ],
+
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+      },
+      {
+        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: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+    series: [
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.zss,
+        symbol: "diamond",
+        symbolOffset: ["-65%", "-50%"],
+        symbolSize: [20, 10],
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(142, 187, 255, 1)",
+        },
+      },
+      {
+        z: 1,
+        name: "招生数",
+        type: "bar",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        data: data.zss,
+        barWidth: "30%",
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+        },
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+              { offset: 1, color: "rgba(142, 187, 255, .5)" },
+            ],
+          },
+        },
+      },
+      {
+        z: 2,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.bms,
+        symbol: "diamond",
+        symbolOffset: ["62%", "-50%"],
+        symbolSize: [20, 10],
+        itemStyle: {
+          borderColor: "#32ffee",
+          color: "rgba(23, 237, 255, 1)",
+        },
+      },
+      {
+        z: 2,
+        name: "报名数",
+        type: "bar",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        data: data.bms,
+        barWidth: "30%",
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+     
+        },
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+              { offset: 1, color: "rgba(23, 237, 255, .5)" },
+            ],
+          },
+        },
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: data.bg.map(() => 100),
+        barWidth: 50,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    // data.list = props.list;
+    // data.year = props.year;
+    // data.list.forEach((item) => {
+    //   data.zssffrc.push((item.zssffrc / 10000).toFixed(0));
+    //   data.bmsffrc.push((item.bmsffrc / 10000).toFixed(0));
+    // //   data.bg.push("");
+    // });
+    // console.log(data.zssffrc,data.bmsffrc);
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/echart_analyze/ylXZZC.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 160px"></div>
+  <div ref="chart" style="width: 100%; height: 220px"></div>
 </template>
 
 <script setup>