From 1f62119765053d06d70c4dd1c19d3adb1da4f664 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Wed, 5 Jun 2024 13:10:44 +0800
Subject: [PATCH] gx

---
 src/view/echarts_education/pie5.vue | 193 ++++++++++++++++++++++++++++
 src/view/education.vue              | 177 ++++++++++---------------
 2 files changed, 263 insertions(+), 107 deletions(-)
 create mode 100644 src/view/echarts_education/pie5.vue

diff --git a/src/view/echarts_education/pie5.vue b/src/view/echarts_education/pie5.vue
new file mode 100644
index 0000000..529968d
--- /dev/null
+++ b/src/view/echarts_education/pie5.vue
@@ -0,0 +1,193 @@
+<template>
+  <div ref="chart" style="width: 50%; height: 280px"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [[], []],
+  list1: [],
+  option: {},
+  initialLegendData: ["县镇", "农村"],
+  initialLegendData1: ["副高级", "正高级", "未定级", "员级", "中级", "助理级"],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br/>{a}:{c} <br/>{a1}:{c1} ",
+    },
+    legend: {
+      data: data.initialLegendData,
+      top: "8%",
+      right: "11%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "value",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false, // 取消x轴线
+        },
+        splitLine: {
+          show: false, //---grid 区域中的分隔线
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "category",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        data: data.initialLegendData1,
+      },
+   
+    ],
+    series: [
+      {
+        z: 1,
+        name: "县镇",
+        barGap: "-50%",
+        type: "bar",
+        data: data.list[1],
+        barWidth: "25%", //柱宽
+        barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
+        label: {
+          show: true,
+          position: "inside",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(254, 255, 142, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(251, 255, 142, 0.20)",
+            },
+          ]),
+        },
+      },
+      {
+        z: 2,
+        name: "农村",
+        type: "bar",
+        barGap: "-50%",
+        data: data.list[0],
+        barWidth: "25%", //柱宽
+        barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
+        label: {
+          show: true,
+          position: "inside",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(23, 255, 206, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(23, 255, 202, 0.20)",
+            },
+          ]),
+        },
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+const setChart1 = () => {
+  data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量
+  data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量
+  data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量
+  data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量
+  data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量
+  data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量
+  data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量
+  data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量
+  data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量
+  data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量
+  data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量
+  data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量
+
+  console.log(data.list, "乡镇1");
+};
+
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list;
+    // console.log(data.list1, "乡镇");
+    setChart1();
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/view/education.vue b/src/view/education.vue
index b0f3a5e..9f35cb0 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -11,11 +11,7 @@
         <eP1 :list="data.xsql"></eP1>
         <div class="t_1"></div>
         <div class="t_2">
-          <div
-            class="t_2_1"
-            v-for="(item, index) in data.zdgz"
-            :key="index"
-          >
+          <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
             <div class="top">{{ item.value }}</div>
             <div class="t_3">
               <div :class="item.cls"></div>
@@ -24,10 +20,7 @@
           </div>
         </div>
       </div>
-      <div
-        class="flex1"
-        style="margin-top: 30px"
-      >
+      <div class="flex1" style="margin-top: 30px">
         <div class="yd_title left_2">
           <div class="animate-border">
             <i></i>
@@ -97,16 +90,8 @@
             </div>
           </div>
           <div class="schoolb">
-            <img
-              src="../assets/eduImg/xxgkTop.png"
-              class="gkTop"
-              alt=""
-            >
-            <img
-              src="../assets/eduImg/xxgk.gif"
-              class="gkMove"
-              alt=""
-            >
+            <img src="../assets/eduImg/xxgkTop.png" class="gkTop" alt="" />
+            <img src="../assets/eduImg/xxgk.gif" class="gkMove" alt="" />
             <div class="grade">
               <div class="schoolbs">
                 <span class="spot">初中</span>
@@ -143,15 +128,13 @@
       <div class="flex1">
         <div style="width: 100%; display: flex; flex-wrap: wrap">
           <edie :list="data.xzncxxsl"></edie>
-          <div class="rating">
+          <edie5 :list="data.xzncjszcsl"></edie5>
+          <!-- <div class="rating">
             <edXX
               :list="data.schoolData"
               :active="selectData.active"
             ></edXX>
             <div class="ratingBtn">
-              <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
-                <span @click="ratingBtn('城市')">城市</span>
-              </div> -->
               <div
                 class="onImg"
                 :class="{ ratingImg: selectData.active === '县镇' }"
@@ -165,7 +148,7 @@
                 <span @click="ratingBtn('农村')">农村</span>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="flex1">
@@ -222,15 +205,8 @@
             <div>
               <span class="green">16</span>
             </div>
-            <img
-              src="@/assets/eduImg/jyImg10.png"
-              alt=""
-            />
-            <img
-              src="@/assets/eduImg/pp3.gif"
-              alt=""
-              class="ppImg"
-            />
+            <img src="@/assets/eduImg/jyImg10.png" alt="" />
+            <img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg1">
               <span>绿色预警</span>
             </div>
@@ -239,15 +215,8 @@
             <div>
               <span class="yellow">239</span>
             </div>
-            <img
-              src="@/assets/eduImg/jyImg9.png"
-              alt=""
-            />
-            <img
-              src="@/assets/eduImg/pp2.gif"
-              alt=""
-              class="ppImg"
-            />
+            <img src="@/assets/eduImg/jyImg9.png" alt="" />
+            <img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg2">
               <span>黄色预警</span>
             </div>
@@ -256,15 +225,8 @@
             <div>
               <span class="red">139</span>
             </div>
-            <img
-              src="@/assets/eduImg/jyImg8.png"
-              alt=""
-            />
-            <img
-              src="@/assets/eduImg/pp1.gif"
-              alt=""
-              class="ppImg"
-            />
+            <img src="@/assets/eduImg/jyImg8.png" alt="" />
+            <img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg3">
               <span>红色预警</span>
             </div>
@@ -298,8 +260,9 @@
 <script setup>
 import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import edCSR from "./echarts_education/edCSR.vue";
-import edXX from "./echarts_education/edXX.vue";
 import edie from "./echarts_education/pie.vue";
+import edie5 from "./echarts_education/pie5.vue";
+import edXX from "./echarts_education/edXX.vue";
 import ePie1 from "./echarts_education/pie1.vue";
 import ePie2 from "./echarts_education/pie2.vue";
 import ePie3 from "./echarts_education/pie3.vue";
@@ -311,6 +274,9 @@ import http from "@/utils/request.js";
 const selectData = reactive({
   value1: "111",
   value2: "tes1",
+  list: [],
+  list1: [],
+  active: "县镇",
   options1: [
     {
       value: "111",
@@ -335,9 +301,6 @@ const selectData = reactive({
       label: "中学心理健康诊断",
     },
   ],
-  list: [],
-  active: "县镇",
-  list1: [],
 });
 var roseData1 = ref([
   {
@@ -405,30 +368,30 @@ var roseData3 = ref([
     value: 78,
   },
 ]);
-var schoolData = ref([
-  { name: "副高级", value: 44 },
-  { name: "正高级", value: 22 },
-  { name: "未定级", value: 11 },
-  { name: "员级", value: 12 },
-  { name: "中级", value: 54 },
-  { name: "助理级", value: 74 },
-]);
-var schoolData1 = ref([
-  { name: "副高级", value: 11 },
-  { name: "正高级", value: 22 },
-  { name: "未定级", value: 11 },
-  { name: "员级", value: 12 },
-  { name: "中级", value: 22 },
-  { name: "助理级", value: 74 },
-]);
-var schoolData2 = ref([
-  { name: "副高级", value: 22 },
-  { name: "正高级", value: 22 },
-  { name: "未定级", value: 11 },
-  { name: "员级", value: 33 },
-  { name: "中级", value: 54 },
-  { name: "助理级", value: 74 },
-]);
+// var schoolData = ref([
+//   { name: "副高级", value: 44 },
+//   { name: "正高级", value: 22 },
+//   { name: "未定级", value: 11 },
+//   { name: "员级", value: 12 },
+//   { name: "中级", value: 54 },
+//   { name: "助理级", value: 74 },
+// ]);
+// var schoolData1 = ref([
+//   { name: "副高级", value: 11 },
+//   { name: "正高级", value: 22 },
+//   { name: "未定级", value: 11 },
+//   { name: "员级", value: 12 },
+//   { name: "中级", value: 22 },
+//   { name: "助理级", value: 74 },
+// ]);
+// var schoolData2 = ref([
+//   { name: "副高级", value: 22 },
+//   { name: "正高级", value: 22 },
+//   { name: "未定级", value: 11 },
+//   { name: "员级", value: 33 },
+//   { name: "中级", value: 54 },
+//   { name: "助理级", value: 74 },
+// ]);
 
 const selectChange1 = () => {
   if (selectData.value1 == "111") {
@@ -441,32 +404,32 @@ const selectChange1 = () => {
     selectData.list = roseData1.value;
   }
 };
-const ratingBtn = (item) => {
-  selectData.active = item; // 设置当前选中的项目
-  switch (selectData.active) {
-    // case "城市":
-    //   selectData.list1 = schoolData.value;
-    //   break;
-    case "县镇":
-      data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
-      data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
-      data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
-      data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
-      data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
-      data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
-      break;
-    case "农村":
-      data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
-      data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
-      data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
-      data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
-      data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
-      data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
-      break;
-    default:
-      break;
-  }
-};
+// const ratingBtn = (item) => {
+//   selectData.active = item; // 设置当前选中的项目
+//   switch (selectData.active) {
+//     // case "城市":
+//     //   selectData.list1 = schoolData.value;
+//     //   break;
+//     case "县镇":
+//       data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
+//       data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
+//       data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
+//       data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
+//       data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
+//       data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
+//       break;
+//     case "农村":
+//       data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
+//       data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
+//       data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
+//       data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
+//       data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
+//       data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
+//       break;
+//     default:
+//       break;
+//   }
+// };
 const data = reactive({
   xsql: [],
   zdgz: [
@@ -532,7 +495,7 @@ const getData = async () => {
       data.xzncjszcsl = res.data.xzncjszcsl;
       // 资助项目
       data.zzxm = res.data.zzxm;
-      ratingBtn("县镇");
+      // ratingBtn("县镇");
       // 吹哨人
     }
   });
@@ -1096,7 +1059,7 @@ onMounted(() => {
     align-items: center;
     position: relative;
 
-    .ppImg{
+    .ppImg {
       position: absolute;
       width: 500px;
       height: 170px;