gx

src/view/analyze.vue

@@ -101,7 +101,6 @@
             <i></i>
           </div>
         </div>
-        <ylXZZC :list1="data.zccs1" :list2="data.zccs2" v-if="showEchart"></ylXZZC>
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -115,14 +114,26 @@
         <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" @click="showEnrol()">
@@ -131,7 +142,12 @@
             <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
@@ -163,6 +179,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 ViewDataimg from "@/assets/images/sjfx/sjfx.png";
@@ -174,7 +191,7 @@ 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 dialogShowEnrol = ref(false);
 const dataTab = reactive({
   url: "",
   title: "",
@@ -201,71 +218,100 @@ const dataTab = reactive({
 const dataEnrol = reactive({
   title: "入学分析",
   // 幼儿园名称
-  kidName: ['第一幼儿园','第二幼儿园','第三幼儿园','第四幼儿园','第五幼儿园','第六幼儿园','第七幼儿园','第八幼儿园'],
+  kidName: [
+    "第一幼儿园",
+    "第二幼儿园",
+    "第三幼儿园",
+    "第四幼儿园",
+    "第五幼儿园",
+    "第六幼儿园",
+    "第七幼儿园",
+    "第八幼儿园",
+  ],
   // 托班
-  kidZs1: [100,105,369,523,651,225,664,245],
+  kidZs1: [100, 105, 369, 523, 651, 225, 664, 245],
-  kidBm1: [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],
+  kidZs2: [100, 105, 369, 523, 651, 225, 664, 245],
-  kidBm2: [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],
+  kidZs3: [100, 105, 369, 523, 651, 225, 664, 245],
-  kidBm3: [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],
+  kidZs4: [100, 105, 369, 523, 651, 225, 664, 245],
-  kidBm4: [100,105,369,523,651,225,664,245],
+  kidBm4: [100, 105, 369, 523, 651, 225, 664, 245],
   // 小学
-  primaryName: ['第一小学','第二小学','第三小学','第四小学','第五小学','第六小学'],
+  primaryName: [
-  primaryZs: [231,544,343,444,335,632],
+    "第一小学",
-  primaryBm: [231,544,343,444,335,632],
+    "第二小学",
+    "第三小学",
+    "第四小学",
+    "第五小学",
+    "第六小学",
+  ],
+  primaryZs: [231, 544, 343, 444, 335, 632],
+  primaryBm: [231, 544, 343, 444, 335, 632],
   // 初中
-  middleName: ['第一初中','第二初中','第三初中','第四初中'],
+  middleName: ["第一初中", "第二初中", "第三初中", "第四初中"],
-  middleZs: [231,544,343,444],
+  middleZs: [231, 544, 343, 444],
   // 高中
-  highName: ['第一高中','第二高中','第三高中'],
+  highName: ["第一高中", "第二高中", "第三高中"],
-  highZs: [231,335,632],
+  highZs: [231, 335, 632],
   // 学校历年匹配
   schoolNmae: [
     {
-      name: '第一小学',
+      name: "第一小学",
       id: 0,
     },
     {
-      name: '第一初中',
+      name: "第一初中",
       id: 1,
     },
     {
-      name: '第一高中',
+      name: "第一高中",
       id: 2,
     },
   ],
-  schoolYear: [2022,2023,2024],
+  schoolYear: [2022, 2023, 2024],
   schoolData: [
     {
       id: 0,
-      bm: [335,654,365],
+      bm: [335, 654, 365],
-      zs: [335,654,521],
+      zs: [335, 654, 521],
     },
     {
       id: 1,
-      zs: [335,654,521],
+      zs: [335, 654, 521],
     },
     {
       id: 2,
-      zs: [355,652,721],
+      zs: [355, 652, 721],
     },
-  ]
+  ],
-})
+});
 
 const showEnrol = () => {
-  dialogShowEnrol.value = true
+  dialogShowEnrol.value = true;
-}
+};
 const close = () => {
-  dialogShowEnrol.value
+  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([
   {
@@ -605,12 +651,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%;
 }
@@ -971,4 +1025,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/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>