gx

src/view/echarts_education/eP1.vue

@@ -32,7 +32,7 @@ const option = {
   tooltip: {
     show: true, //---是否显示提示框,默认为true
     trigger: "axis",
-    formatter: "{b0}:{c0}" + "人",
+    formatter: "{b0}:{c1}" + "人",
   },
   xAxis: [
     {

src/view/echarts_hygiene/eP5.vue

@@ -116,18 +116,8 @@ const getOption = () => {
         itemStyle: {
           normal: {
             color: function (params) {
-              let colorList = [
+               var colorList = [
-                ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,   [
-                ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
-                ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
-              ];
-              if (params.dataIndex == 0) {
-                return new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1, //y->y2
-                  [
                   {
                     offset: 0,
                     color: "rgba(23, 237, 255, 1)",
@@ -137,33 +127,8 @@ const getOption = () => {
                     color: "rgba(23, 237, 255, 0.20)",
                   },
                 ],
-                  false
+                false),
-                );
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,    [
-              } else if (params.dataIndex % 3 == 0) {
-                return new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1, //y->y2
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(23, 237, 255, 1)",
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(23, 237, 255, 0.20)",
-                    },
-                  ],
-                  false
-                );
-              } else if (params.dataIndex % 2 == 0) {
-                return new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1, //y->y2
-                  [
                   {
                     offset: 0,
                     color: "rgba(255, 243, 119, 1)",
@@ -173,15 +138,8 @@ const getOption = () => {
                     color: "rgba(255, 242, 142, 0.20)",
                   },
                 ],
-                  false
+                false),
-                );
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,     [
-              } else {
-                return new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1, //y->y2
-                  [
                   {
                     offset: 0,
                     color: "rgba(142, 187, 255, 1)",
@@ -191,9 +149,10 @@ const getOption = () => {
                     color: "rgba(142, 187, 255, 0.20)",
                   },
                 ],
-                  false
+                false),
-                );
+            ];
-              }
+
+             return colorList[params.dataIndex % colorList.length];
           },
           },
         },

src/view/echarts_hygiene/eP7.vue

@@ -123,13 +123,8 @@ data.option = {
       itemStyle: {
         normal: {
           color: function (params) {
-            if (params.dataIndex == 0) {
+               var colorList = [
-              return new echarts.graphic.LinearGradient(
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,   [
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
                   {
                     offset: 0,
                     color: "rgba(23, 237, 255, 1)",
@@ -139,33 +134,8 @@ data.option = {
                     color: "rgba(23, 237, 255, 0.20)",
                   },
                 ],
-                false
+                false),
-              );
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,    [
-            } else if (params.dataIndex % 3 == 0) {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
-                  {
-                    offset: 0,
-                    color: "rgba(23, 237, 255, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(23, 237, 255, 0.20)",
-                  },
-                ],
-                false
-              );
-            } else if (params.dataIndex % 2 == 0) {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
                   {
                     offset: 0,
                     color: "rgba(255, 243, 119, 1)",
@@ -175,15 +145,8 @@ data.option = {
                     color: "rgba(255, 242, 142, 0.20)",
                   },
                 ],
-                false
+                false),
-              );
+              new echarts.graphic.LinearGradient(0, 0, 0, 1,     [
-            } else {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
                   {
                     offset: 0,
                     color: "rgba(142, 187, 255, 1)",
@@ -193,9 +156,10 @@ data.option = {
                     color: "rgba(142, 187, 255, 0.20)",
                   },
                 ],
-                false
+                false),
-              );
+            ];
-            }
+
+             return colorList[params.dataIndex % colorList.length];
           },
         },
       },

src/view/echarts_yl/ylJHSY.vue

@@ -78,10 +78,10 @@ const getOption = () => {
       trigger: "axis",
       formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
       axisPointer: {
-        type: "cross",
+        // type: "cross",
-        label: {
+        // label: {
-          backgroundColor: "#3F82F7", //提示文字标题颜色
+        //   backgroundColor: "#3F82F7", //提示文字标题颜色
-        },
+        // },
       },
     },
     legend: {

src/view/education.vue

@@ -6,8 +6,8 @@
         <eP1></eP1>
         <div class="t_1"></div>
         <div class="t_2">
-          <div class="t_2_1" v-for="(item, index) in fl" :key="index">
+          <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
-            <div class="top">{{ item.value }}%</div>
+            <div class="top">{{ item.value }}</div>
             <div class="t_3">
               <div :class="item.cls"></div>
               <div class="right">{{ item.name }}</div>
@@ -19,33 +19,15 @@
         <div class="yd_title left_2"></div>
         <div class="selectLint">
           <div class="selectBox">
-            <el-select
+            <el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
-              v-model="selectData.value1"
+              <el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
-              placeholder="请选择"
+                :value="item.value" />
-              size="large"
-              @change="selectChange1"
-            >
-              <el-option
-                v-for="item in selectData.options1"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </div>
           <div class="selectBox">
-            <el-select
+            <el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
-              v-model="selectData.value2"
+              <el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
-              placeholder="请选择"
+                :value="item.value" />
-              size="large"
-              @change="selectChange1"
-            >
-              <el-option
-                v-for="item in selectData.options2"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </div>
         </div>
@@ -58,42 +40,42 @@
         <div class="school">
           <div class="schoolaBox">
             <div class="schoola">
-              <span>1,211</span>
+              <span>{{ data.xxgk.xxzs }}</span>
               <span class="schoola1">学校总数</span>
             </div>
             <div class="schoola">
-              <span>46,718</span> <span class="schoola1">学生总数</span>
+              <span>{{ data.xxgk.xszs }}</span> <span class="schoola1">学生总数</span>
             </div>
             <div class="schoola">
-              <span>883</span> <span class="schoola1">班级总数</span>
+              <span>{{ data.xxgk.bjzs }}</span> <span class="schoola1">班级总数</span>
             </div>
             <div class="schoola">
-              <span>4,381</span> <span class="schoola1">教职工总数</span>
+              <span>{{ data.xxgk.jzgzs }}</span> <span class="schoola1">教职工总数</span>
             </div>
           </div>
           <div class="schoolb">
             <div class="grade">
               <div class="schoolbs">
-                <span class="spot">初中</span> <span>7</span>
+                <span class="spot">初中</span> <span>{{ data.xxgk.czxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">高中</span> <span>7</span>
+                <span class="spot">高中</span> <span>{{ data.xxgk.gzxxsl }}</span>
               </div>
             </div>
             <div class="grade">
               <div class="schoolbs">
-                <span class="spot">小学</span> <span>7</span>
+                <span class="spot">小学</span> <span>{{ data.xxgk.xxxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">中职</span> <span>7</span>
+                <span class="spot">中职</span> <span>{{ data.xxgk.zzxxsl }}</span>
               </div>
             </div>
             <div class="grade grade1">
               <div class="schoolbs">
-                <span class="spot">幼儿园</span> <span>7</span>
+                <span class="spot">幼儿园</span> <span>{{ data.xxgk.yeyxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">特殊教育</span> <span>7</span>
+                <span class="spot">特殊教育</span> <span>{{ data.xxgk.tsjyxxsl }}</span>
               </div>
             </div>
           </div>
@@ -105,22 +87,13 @@
           <div class="rating">
             <edXX :list="selectData.list1" :active="selectData.active"></edXX>
             <div class="ratingBtn">
-              <div
+              <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
-                class="onImg"
-                :class="{ ratingImg: selectData.active === '城市' }"
-              >
                 <span @click="ratingBtn('城市')">城市</span>
               </div>
-              <div
+              <div class="onImg" :class="{ ratingImg: selectData.active === '县镇' }">
-                class="onImg"
-                :class="{ ratingImg: selectData.active === '县镇' }"
-              >
                 <span @click="ratingBtn('县镇')">县镇</span>
               </div>
-              <div
+              <div class="onImg" :class="{ ratingImg: selectData.active === '农村' }">
-                class="onImg"
-                :class="{ ratingImg: selectData.active === '农村' }"
-              >
                 <span @click="ratingBtn('农村')">农村</span>
               </div>
             </div>
@@ -135,11 +108,7 @@
             <span>资助金额</span>
           </div>
           <div class="rolling">
-            <div
+            <div v-for="(item, index) in 20" :key="index" class="fundingContent">
-              v-for="(item, index) in 20"
-              :key="index"
-              class="fundingContent"
-            >
               <span class="spot">幼儿资助</span>
               <span class="spot">379人次</span>
               <span class="spot">70.88</span>
@@ -232,174 +201,7 @@ import ePie4 from "./echarts_education/pie4.vue";
 import ePieRose from "./echarts_education/pieRose.vue";
 import eP1 from "./echarts_education/eP1.vue";
 import http from "@/utils/request.js";
-const data = reactive({
-  fl: [
-    {
-      name: "留守儿童",
-      value: 16.1,
-      cls: "left1",
-    },
-    {
-      name: "独生子女",
-      value: 32.1,
-      cls: "left2",
-    },
-    {
-      name: "单亲家庭",
-      value: 65.1,
-      cls: "left3",
-    },
-    {
-      name: "享受低保",
-      value: 0.1,
-      cls: "left4",
-    },
-  ],
-  selectData: {
-    value1: "111",
-    value2: "tes1",
-    options1: [
-      {
-        value: "111",
-        label: "2023秋季检查",
-      },
-      {
-        value: "222",
-        label: "2024春季检查",
-      },
-    ],
-    options2: [
-      {
-        value: "tes1",
-        label: "中小学心理健康诊断测验(MHT）",
-      },
-      {
-        value: "tes2",
-        label: "小学心理健康诊断测验",
-      },
-      {
-        value: "tes3",
-        label: "中学心理健康诊断",
-      },
-    ],
-    list: [],
-    active: "城市",
-    list1: [],
-  },
-  roseData1: [
-    {
-      name: "正常",
-      value: 17,
-    },
-    {
-      name: "关注",
-      value: 16,
-    },
-    {
-      name: "追踪",
-      value: 14,
-    },
-    {
-      name: "异常",
-      value: 8,
-    },
-    {
-      name: "警戒",
-      value: 8,
-    },
-  ],
-  roseData2: [
-    {
-      name: "正常",
-      value: 37,
-    },
-    {
-      name: "关注",
-      value: 26,
-    },
-    {
-      name: "追踪",
-      value: 24,
-    },
-    {
-      name: "异常",
-      value: 18,
-    },
-    {
-      name: "警戒",
-      value: 18,
-    },
-  ],
-  roseData3: [
-    {
-      name: "正常",
-      value: 227,
-    },
-    {
-      name: "关注",
-      value: 169,
-    },
-    {
-      name: "追踪",
-      value: 114,
-    },
-    {
-      name: "异常",
-      value: 98,
-    },
-    {
-      name: "警戒",
-      value: 78,
-    },
-  ],
-  schoolData: [
-    { name: "副高级", value: 44 },
-    { name: "正高级", value: 22 },
-    { name: "未定级", value: 11 },
-    { name: "员级", value: 12 },
-    { name: "中级", value: 54 },
-    { name: "助理级", value: 74 },
-  ],
-  schoolData1: [
-    { name: "副高级", value: 11 },
-    { name: "正高级", value: 22 },
-    { name: "未定级", value: 11 },
-    { name: "员级", value: 12 },
-    { name: "中级", value: 22 },
-    { name: "助理级", value: 74 },
-  ],
-  schoolData2: [
-    { name: "副高级", value: 22 },
-    { name: "正高级", value: 22 },
-    { name: "未定级", value: 11 },
-    { name: "员级", value: 33 },
-    { name: "中级", value: 54 },
-    { name: "助理级", value: 74 },
-  ],
-});
 
-const fl = ref([
-  {
-    name: "留守儿童",
-    value: 16.1,
-    cls: "left1",
-  },
-  {
-    name: "独生子女",
-    value: 32.1,
-    cls: "left2",
-  },
-  {
-    name: "单亲家庭",
-    value: 65.1,
-    cls: "left3",
-  },
-  {
-    name: "享受低保",
-    value: 0.1,
-    cls: "left4",
-  },
-]);
 const selectData = reactive({
   value1: "111",
   value2: "tes1",
@@ -549,19 +351,51 @@ const ratingBtn = (item) => {
       break;
   }
 };
+const data = reactive({
+  xsql: [],
+  zdgz: [
+    {
+      name: "留守儿童",
+      value: 16.1,
+      cls: "left1",
+    },
+    {
+      name: "独生子女",
+      value: 32.1,
+      cls: "left2",
+    },
+    {
+      name: "单亲家庭",
+      value: 65.1,
+      cls: "left3",
+    },
+    {
+      name: "享受低保",
+      value: 0.1,
+      cls: "left4",
+    },
+  ],
+  xxgk: {}
+})
 onBeforeMount(() => {
   selectData.list = roseData1.value;
   selectData.list1 = schoolData.value;
-
-  getData();
-});
-const getData = () => {
   http.get("/api/ggfwyth/education").then((res) => {
     if (res.code == 200) {
-      console.log(res.data);
+      data.xsql.push(res.data.xssl.zz)
+      data.xsql.push(res.data.xssl.gz)
+      data.xsql.push(res.data.xssl.cz)
+      data.xsql.push(res.data.xssl.xx)
+      data.xsql.push(res.data.xssl.yey)
+      data.xsql.push(res.data.xssl.tsjy)
+      data.zdgz[0].value = res.data.zdgz.lset
+      data.zdgz[1].value = res.data.zdgz.dszn
+      data.zdgz[2].value = res.data.zdgz.dqjt
+      data.zdgz[3].value = res.data.zdgz.xsdb
+      data.xxgk = res.data.xxgk
     }
   });
-};
+});
 </script>
 
 <style lang="scss" scoped>
@@ -916,6 +750,7 @@ const getData = () => {
 .flex11 {
   padding: 12px 0;
 }
+
 .czr-sl {
   display: flex;
 
@@ -1063,6 +898,7 @@ const getData = () => {
 
   .czrBox {
     height: 104px;
+
     .column {
       height: calc(100% - 26px);
       overflow-y: auto;
@@ -1092,14 +928,17 @@ const getData = () => {
     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;
@@ -1114,6 +953,7 @@ const getData = () => {
     justify-content: center;
     flex-direction: column;
     justify-content: space-between;
+
     span {
       // font-weight: 500;
       // font-size: 14px;
@@ -1132,6 +972,7 @@ const getData = () => {
       text-align: center;
       font-style: normal;
     }
+
     .schoola1 {
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
@@ -1144,6 +985,7 @@ const getData = () => {
       font-style: normal;
     }
   }
+
   .schoolb {
     width: 550px;
     height: 241px;
@@ -1156,6 +998,7 @@ const getData = () => {
     flex-direction: column;
     padding: 10px 0;
     box-sizing: border-box;
+
     span {
       font-weight: 500;
       font-size: 14px;
@@ -1164,10 +1007,12 @@ const getData = () => {
       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;
@@ -1180,16 +1025,19 @@ const getData = () => {
         justify-content: center;
         position: relative;
       }
+
       .spot {
         position: relative;
         margin-right: 7px;
       }
+
       /* 添加伪元素圆点 */
       .spot::before {
         content: "";
         position: absolute;
         top: 50%;
-        left: -16px; /* 调整圆点的位置 */
+        left: -16px;
+        /* 调整圆点的位置 */
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
@@ -1199,16 +1047,19 @@ const getData = () => {
         filter: blur(0px);
       }
     }
+
     .grade1 {
       padding: 12px 110px 0 138px;
       box-sizing: border-box;
     }
   }
 }
+
 .fundingBox {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .funding {
     width: 520px;
     height: 34px;
@@ -1221,6 +1072,7 @@ const getData = () => {
     display: flex;
     align-items: center;
     justify-content: space-around;
+
     // align-items: center;
     // justify-content: center;
     // flex-direction: column;
@@ -1234,6 +1086,7 @@ const getData = () => {
       letter-spacing: 3px;
     }
   }
+
   .rolling {
     width: 100%;
     height: 200px;
@@ -1243,6 +1096,7 @@ const getData = () => {
     flex-direction: column;
     align-items: center;
     padding-left: 6px;
+
     .fundingContent {
       display: flex;
       align-items: center;
@@ -1266,11 +1120,13 @@ const getData = () => {
     }
   }
 }
+
 .rating {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .ratingBtn {
     display: flex;
     // align-items: center;
@@ -1281,7 +1137,8 @@ const getData = () => {
       background-image: url(@/assets/eduImg/jyImg19.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      cursor: pointer; /* 添加指针样式以指示可点击 */
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
     }
 
     .ratingImg {
@@ -1291,6 +1148,7 @@ const getData = () => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     .onImg.active {
       width: 62px;
       height: 29px;
@@ -1298,6 +1156,7 @@ const getData = () => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     span {
       height: 100%;
       display: flex;
@@ -1327,19 +1186,23 @@ const getData = () => {
 }
 
 .column::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
+
 /* 滚动条整体部分 */
 .rolling::-webkit-scrollbar {
   width: 5px;
   // height: 10px;
 }
+
 /* 滚动槽 */
 .rolling::-webkit-scrollbar-track {
   border-radius: 1px;
   background: rgba(0, 128, 231, 0.56);
   -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
 }
+
 /* 滚动条滑块样式 */
 .rolling::-webkit-scrollbar-thumb {
   background-clip: content-box;
@@ -1347,6 +1210,7 @@ const getData = () => {
   background: rgba(0, 162, 231, 1);
   -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
 }
+
 .t_1 {
   margin: 10px auto;
   width: 100%;
@@ -1355,20 +1219,24 @@ const getData = () => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .t_2 {
   margin-top: 5px;
   padding: 0 10px;
   display: flex;
   justify-content: space-around;
+
   .t_2_1 {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .top {
       font-size: 26px;
       color: #ffffff;
       line-height: 30px;
     }
+
     .t_3 {
       width: 135px;
       height: 90px;
@@ -1387,6 +1255,7 @@ const getData = () => {
         background-repeat: no-repeat;
         background-size: 100% 100%;
       }
+
       .left2 {
         position: absolute;
         left: 15px;
@@ -1397,6 +1266,7 @@ const getData = () => {
         background-repeat: no-repeat;
         background-size: 100% 100%;
       }
+
       .left3 {
         position: absolute;
         left: 15px;
@@ -1407,6 +1277,7 @@ const getData = () => {
         background-repeat: no-repeat;
         background-size: 100% 100%;
       }
+
       .left4 {
         position: absolute;
         left: 15px;
@@ -1417,6 +1288,7 @@ const getData = () => {
         background-repeat: no-repeat;
         background-size: 100% 100%;
       }
+
       .right {
         position: absolute;
         left: 65px;