From 74f4580f991f88f49aa3901db34535e02da3696b Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Wed, 17 Apr 2024 15:25:43 +0800
Subject: [PATCH] gx

---
 src/view/echarts_education/edXX.vue | 167 +++++++++++++++++
 src/view/echarts_education/pie.vue  | 183 +++++++++++++++++++
 src/view/education.vue              | 274 ++++++++++++++++++++++------
 3 files changed, 571 insertions(+), 53 deletions(-)
 create mode 100644 src/view/echarts_education/edXX.vue
 create mode 100644 src/view/echarts_education/pie.vue

diff --git a/src/view/echarts_education/edXX.vue b/src/view/echarts_education/edXX.vue
new file mode 100644
index 0000000..8e526ee
--- /dev/null
+++ b/src/view/echarts_education/edXX.vue
@@ -0,0 +1,167 @@
+<template>
+  <div ref="chart" style="width: 50%; height: 50%; min-height: 205px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+  value: 18,
+  text: "留 守 儿 童",
+};
+
+let option = {
+  legend: {
+    bottom: 10,
+    left: "center",
+    data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  series: [
+    // 外圈背景
+    {
+      type: "pie",
+      center: ["60%", "55%"],
+      radius: ["50%", "82%"],
+      hoverAnimation: false,
+      clockWise: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 1,
+          borderColor: "rgba(193, 229, 255, .1)",
+          color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+            {
+              offset: 1,
+              color: "rgba(127, 242, 255, .2)",
+            },
+            {
+              offset: 0,
+              color: "rgba(109, 195, 255, 0)",
+            },
+          ]),
+        },
+      },
+      tooltip: {
+        show: false,
+      },
+      label: {
+        show: false,
+      },
+      data: [100],
+    },
+    /*内心原型图，展示整体数据概览*/
+    {
+      name: "pie",
+      type: "pie",
+      roundCap: true,
+      clockWise: true,
+      startAngle: 180,
+      labelLine: {
+        show: false,
+      },
+      radius: ["50%", "70%"],
+      hoverAnimation: false,
+      center: ["60%", "55%"],
+      data: [
+        // {
+        //   value: datas.value,
+        //   label: {
+        //     normal: {
+        //       // formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
+        //       position: "center",
+        //       show: true,
+        //       textStyle: {
+        //         fontSize: "24",
+        //         fontWeight: "normal",
+        //         color: "#fff",
+        //         lineHeight: 30,
+        //         rich: {
+        //           cell: {
+        //             fontSize: "24",
+        //             fontWeight: "normal",
+        //             color: "#fff",
+        //           },
+        //           text: {
+        //             fontSize: 16,
+        //             fontFamily: "FZLanTingHeiS-L-GB",
+        //             color: "#fff",
+        //           },
+        //         },
+        //       },
+        //     },
+        //   },
+        //   itemStyle: {
+        //     normal: {
+        //       color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+        //         {
+        //           offset: 0,
+        //           color: "rgba(0, 255, 250, 0.29)",
+        //         },
+        //         {
+        //           offset: 0.5,
+        //           color: "rgba(0, 255, 250, 0.8)",
+        //         },
+        //         {
+        //           offset: 1,
+        //           color: "rgba(0, 255, 250, 1)",
+        //         },
+        //       ]),
+        //       shadowColor: "rgba(1,1,1,0.5)",
+        //       shadowBlur: 1,
+        //     },
+        //   },
+        // },
+        // {
+        //   value: 100 - datas.value,
+        //   name: "",
+        //   itemStyle: {
+        //     normal: {
+        //       color: "#095b9b", // 未完成的圆环的颜色
+        //       label: {
+        //         show: false,
+        //       },
+        //       labelLine: {
+        //         show: false,
+        //       },
+        //     },
+        //     emphasis: {
+        //       color: "#095b9b", // 未完成的圆环的颜色
+        //     },
+        //   },
+        // },
+        { value: 44, name: "副高级" },
+        { value: 44, name: "正高级" },
+        { value: 44, name: "未定级" },
+        { value: 44, name: "员级" },
+        { value: 41, name: "中级" },
+        { value: 30, name: "助理级" },
+      ],
+    },
+  ],
+};
+
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped></style>
diff --git a/src/view/echarts_education/pie.vue b/src/view/echarts_education/pie.vue
new file mode 100644
index 0000000..dada3ac
--- /dev/null
+++ b/src/view/echarts_education/pie.vue
@@ -0,0 +1,183 @@
+<template>
+  <div ref="chart" style="width: 50%; height: calc(100% - 46px);min-height:205px;"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+  legend: {
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+      data: ["小学", "初中", "高中",],
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: ["小学", "初中", "高中", ],
+      axisLabel: {
+        show: false,
+      },
+    },
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "城市",
+      type: "bar",
+      data: [2.0, 4.9, 7.0,],
+      barWidth: "18%",
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(142, 187, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(142, 187, 255, 0.20)",
+          },
+        ]),
+      },
+    },
+    {
+      name: "县镇",
+      type: "bar",
+      data: [2.6, 5.9, 9.0,],
+      barWidth: "18%",
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 136, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(23, 136, 255, 0.20)",
+          },
+        ]),
+      },
+    },
+    {
+      name: "农村",
+      type: "bar",
+      data: [2.6, 5.9, 9.0,],
+      barWidth: "18%",
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 237, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(23, 237, 255, 0.20)",
+          },
+        ]),
+      },
+    },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021",].map(() => 100),
+      barWidth: 50,
+    },
+  ],
+};
+
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/education.vue b/src/view/education.vue
index 9481679..b67580f 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -3,7 +3,14 @@
     <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title left_1"></div>
-        <div style="width: 100%; height:calc(100% - 46px);display: flex;flex-wrap:wrap;">
+        <div
+          style="
+            width: 100%;
+            height: calc(100% - 46px);
+            display: flex;
+            flex-wrap: wrap;
+          "
+        >
           <ePie1></ePie1>
           <ePie2></ePie2>
           <ePie3></ePie3>
@@ -15,12 +22,22 @@
         <div class="selectLint">
           <div class="selectBox">
             <el-select v-model="value" placeholder="Select" size="large">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </div>
           <div class="selectBox">
             <el-select v-model="value" placeholder="Select" size="large">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </div>
         </div>
@@ -30,8 +47,60 @@
     <div class="displayFlex center_bg">
       <div class="flex1">
         <div class="yd_title center_1"></div>
-        <eGraph></eGraph>
+        <div class="school">
+          <div class="schoolaBox">
+            <div class="schoola">
+              <span>1,211</span>
+              <span>学校总数</span>
+            </div>
+            <div class="schoola"><span>46,718</span> <span>学生总数</span></div>
+            <div class="schoola"><span>883</span> <span>班级总数</span></div>
+            <div class="schoola">
+              <span>4,381</span> <span>教职工总数</span>
+            </div>
+          </div>
+          <div class="schoolb">
+            <div class="grade">
+              <div class="schoolbs">
+                <span class="spot">初中</span> <span>7</span>
+              </div>
+              <div class="schoolbs">
+                <span class="spot">高中</span> <span>7</span>
+              </div>
+            </div>
+            <div class="grade">
+              <div class="schoolbs">
+                <span class="spot">小学</span> <span>7</span>
+              </div>
+              <div class="schoolbs">
+                <span class="spot">中职</span> <span>7</span>
+              </div>
+            </div>
+            <div class="grade grade1">
+              <div class="schoolbs schoolbs1">
+                <span class="spot">幼儿园</span> <span>7</span>
+              </div>
+              <div class="schoolbs">
+                <span class="spot">特殊教育</span> <span>7</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+      <div class="flex1">
+        <div
+          style="
+            width: 100%;
+            height: calc(100% - 46px);
+            display: flex;
+            flex-wrap: wrap;
+          "
+        >
+          <edie></edie>
+          <edXX></edXX>
+        </div>
+      </div>
+      <div class="flex1"></div>
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1">
@@ -86,13 +155,15 @@
           <div class="czr-bj">
             <div class="czrBox">
               <div class="situation situation1"></div>
+              <div class="column">
+                <div v-for="item in 20">111111111111111</div>
+              </div>
             </div>
             <div class="czrBox">
               <div class="situation situation2"></div>
             </div>
-            <div class="czrBox">
-              <div class="situation situation3"></div>
-            </div>
+            <div class="situation situation3"></div>
+            <div class="czrBox"></div>
           </div>
         </div>
         <!-- <eBubble></eBubble> -->
@@ -103,36 +174,38 @@
 
 <script setup>
 import edCSR from "./echarts_education/edCSR.vue";
+import edXX from "./echarts_education/edXX.vue";
+import edie from "./echarts_education/pie.vue";
 import ePie1 from "./echarts_education/pie1.vue";
 import ePie2 from "./echarts_education/pie2.vue";
 import ePie3 from "./echarts_education/pie3.vue";
 import ePie4 from "./echarts_education/pie4.vue";
 import ePieRose from "./echarts_education/pieRose.vue";
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const value = ref('')
+const value = ref("");
 const options = [
   {
-    value: 'Option1',
-    label: 'Option1',
+    value: "Option1",
+    label: "Option1",
   },
   {
-    value: 'Option2',
-    label: 'Option2',
+    value: "Option2",
+    label: "Option2",
   },
   {
-    value: 'Option3',
-    label: 'Option3',
+    value: "Option3",
+    label: "Option3",
   },
   {
-    value: 'Option4',
-    label: 'Option4',
+    value: "Option4",
+    label: "Option4",
   },
   {
-    value: 'Option5',
-    label: 'Option5',
+    value: "Option5",
+    label: "Option5",
   },
-]
+];
 </script>
 
 <style lang="scss" scoped>
@@ -172,7 +245,6 @@ const options = [
   width: 582px;
   box-sizing: border-box;
   padding-left: 10px;
-  // margin-right: 28px;
   background-image: url(@/assets/images/center_bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -212,25 +284,25 @@ const options = [
   background-size: 100% 100%;
 }
 
-.yd_title {
-  // background-image: url(@/assets/img_04.png);
-  // background-repeat: no-repeat;
-  // background-size: 100% 100%;
-  box-sizing: border-box;
-  width: 100%;
-  height: 36px;
-  position: relative;
+// .yd_title {
+//   // background-image: url(@/assets/img_04.png);
+//   // background-repeat: no-repeat;
+//   // background-size: 100% 100%;
+//   box-sizing: border-box;
+//   width: 100%;
+//   height: 36px;
+//   position: relative;
 
-  .text {
-    font-size: 16px;
-    font-family: SourceHanSansCN;
-    font-weight: bold;
-    color: #ffffff;
-    position: absolute;
-    left: 33px;
-    top: 3px;
-  }
-}
+//   .text {
+//     font-size: 16px;
+//     font-family: SourceHanSansCN;
+//     font-weight: bold;
+//     color: #ffffff;
+//     position: absolute;
+//     left: 33px;
+//     top: 3px;
+//   }
+// }
 
 .basicInformation {
   display: flex;
@@ -459,7 +531,7 @@ const options = [
   // background-repeat: no-repeat;
   // background-size: 100% 100%;
   box-sizing: border-box;
-  width: 94%;
+  width: 98%;
   height: 36px;
   position: relative;
 
@@ -482,6 +554,9 @@ const options = [
   background-size: 100% 100%;
 }
 
+.flex11 {
+  padding: 12px 0;
+}
 .czr-sl {
   display: flex;
   .historyimg {
@@ -515,9 +590,6 @@ const options = [
     background-image: url(@/assets/eduImg/jyImg15.png);
   }
 }
-.flex11 {
-  padding: 12px 0;
-}
 .earlyWarning {
   height: calc(100% - 10px);
 
@@ -616,6 +688,10 @@ const options = [
 
   .czrBox {
     height: 8vh;
+    .column {
+      height: calc(100% - 26px);
+      overflow-y: auto;
+    }
   }
   .situation {
     width: 495px;
@@ -632,7 +708,101 @@ const options = [
   .situation3 {
     background-image: url(@/assets/eduImg/jyImg13.png);
   }
-};
+}
+.school {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .schoolaBox {
+    display: flex;
+    justify-content: space-between;
+  }
+  .schoola {
+    width: 124px;
+    height: 79px;
+    margin-top: 20px;
+    padding: 10px 0 14px 0;
+    box-sizing: border-box;
+    background-image: url(@/assets/eduImg/jyImg3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    justify-content: space-between;
+    span {
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 4px;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+  }
+  .schoolb {
+    width: 550px;
+    height: 241px;
+    // height: calc(100% - 0px);
+    background-image: url(@/assets/eduImg/jyImg2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0;
+    box-sizing: border-box;
+    span {
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 4px;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+    .grade {
+      display: flex;
+      justify-content: space-between;
+      padding: 36px 0 0px 18px;
+      .schoolbs {
+        width: 128px;
+        height: 41px;
+        padding: 6px 0 30px 0 0;
+        background-image: url(@/assets/eduImg/jyImg1.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+      .spot {
+        position: relative;
+        margin-right: 7px;
+      }
+      /* 添加伪元素圆点 */
+      .spot::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: -16px; /* 调整圆点的位置 */
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: rgba(0, 230, 255, 1);
+        border-radius: 50%;
+      }
+    }
+    .grade1 {
+      padding: 18px 130px 0 150px;
+      box-sizing: border-box;
+      .schoolbs1 {
+        margin-right: 50px;
+      }
+    }
+  }
+}
+
 .selectLint {
   width: 100%;
   display: flex;
@@ -642,8 +812,8 @@ const options = [
   .selectBox {
     width: 48%;
     background-image: url(@/assets/eduImg/title3.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 }
 </style>
@@ -653,21 +823,19 @@ const options = [
     font-size: 18px !important;
   }
   .el-select__wrapper {
-    background-color: rgba(255,255,255,0) !important;
-    
+    background-color: rgba(255, 255, 255, 0) !important;
   }
-  .el-select__placeholder{
+  .el-select__placeholder {
     color: #fff !important;
   }
-  .el-select__caret{
+  .el-select__caret {
     color: #fff !important;
     font-size: 18px !important;
   }
-  .el-select-dropdown__item{
+  .el-select-dropdown__item {
     color: #fff !important;
   }
-  .el-select-dropdown__wrap{
-
+  .el-select-dropdown__wrap {
   }
 }
 </style>