gx

src/view/analyze.vue

@@ -180,11 +180,7 @@
       @close="close1"
     >
     </DialogElderly>
-    <DialogMap
+    <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
-      :dialogShowMap="dialogShowMap"
-      :title="mapTitle"
-      @close="close"
-    >
     </DialogMap>
   </div>
 </template>
@@ -437,8 +433,27 @@ const dataElderly = reactive({
   schoolData: [
     {
       id: 0,
-      bm: [335, 654, 365],
+      nl: [
-      zs: [335, 654, 521],
+        335, 654, 365, 365, 365, 365, 315, 366, 35, 165, 265, 345, 155, 385,
+        365,
+      ],
+      xz: [
+        "大街乡",
+        "社阳乡",
+        "沐尘畲族乡",
+        "庙下乡",
+        "溪口镇",
+        "罗家乡",
+        "模环乡",
+        "横山镇",
+        "石佛乡",
+        "詹家镇",
+        "塔石镇",
+        "小男孩镇",
+        "湖镇镇",
+        "东华街道",
+        "龙洲街道",
+      ],
     },
     {
       id: 1,
@@ -483,7 +498,7 @@ const tab_change = (index, name) => {
 const chooseXX = (name) => {
   console.log(name);
   if (name == "交通") {
-    mapTitle.value='交通';
+    mapTitle.value = "交通";
     dialogShowMap.value = true;
   }
   // tableType.title = village;

src/view/dialog/diaLogElderlyData.vue

@@ -39,81 +39,13 @@
             />
           </div>
         </div>
-        <!-- <div class="tabChoose">
+        <div class="yd_title">
-          <div :class="data.tab == '0' ? 'choosed' : 'tabs'">
+          <img
-            <span @click="changeTab('0')">城区幼儿园招生情况</span>
+            class="title_botton"
-          </div>
+            src="@/assets/images/sjfx/lnsjfx1.png "
-          <div :class="data.tab == '1' ? 'choosed' : 'tabs'">
+            alt=""
-            <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.dataElderly.kidZs1"
-              :list2="data.dataElderly.kidBm1"
-              :year="data.dataElderly.kidName"
-            ></zsbm>
-          </div>
-          <div style="width: 49%; height: 350px; float: right;position: relative;">
-            <div class="titleSmall2"></div>
-            <zsbm
-              :list1="data.dataElderly.kidZs2"
-              :list2="data.dataElderly.kidBm2"
-              :year="data.dataElderly.kidName"
-            ></zsbm>
-          </div>
-          <div style="width: 49%; height: 350px; float: left;position: relative;">
-            <div class="titleSmall3"></div>
-            <zsbm
-              :list1="data.dataElderly.kidZs3"
-              :list2="data.dataElderly.kidBm3"
-              :year="data.dataElderly.kidName"
-            ></zsbm>
-          </div>
-          <div style="width: 49%; height: 350px; float: right;position: relative;">
-            <div class="titleSmall4"></div>
-            <zsbm
-              :list1="data.dataElderly.kidZs4"
-              :list2="data.dataElderly.kidBm4"
-              :year="data.dataElderly.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.dataElderly.primaryZs"
-              :list2="data.dataElderly.primaryBm"
-              :year="data.dataElderly.primaryName"
-            ></zsbm>
-          </div>
-          <div style="width: 49%; height: 350px; float: right;position: relative;">
-            <div class="titleSmall6"></div>
-            <zs
-              :list1="data.dataElderly.middleZs"
-              :year="data.dataElderly.middleName"
-            ></zs>
-          </div>
-          <div style="width: 49%; height: 350px; float: left;position: relative;">
-            <div class="titleSmall7"></div>
-            <zs
-              :list1="data.dataElderly.highZs"
-              :year="data.dataElderly.highName"
-            ></zs>
-          </div>
-        </div> -->
         <div style="width: 100%; height: 700px; overflow: hidden">
           <div class="selectLint">
             <div class="selectBox">
@@ -148,8 +80,25 @@
             </div>
           </div>
           <div
-            style="width: 86%; margin-left: 7%; height: 600px; overflow: hidden"
+            style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
-            v-if="data.pickNum == 0"
+          >
+            <eP5
+              :list="data.selectList1"
+            ></eP5>
+            <!-- <pick2
+              :list1="data.selectList1"
+              :year="data.dataElderly.schoolYear"
+            ></pick2> -->
+          </div>
+          <div class="yd_title">
+          <img
+            class="title_botton"
+            src="@/assets/images/sjfx/lnsjfx2.png "
+            alt=""
+          />
+        </div>
+          <div
+            style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
           >
             <pick1
               :list1="data.selectList1"
@@ -157,15 +106,6 @@
               :year="data.dataElderly.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.dataElderly.schoolYear"
-            ></pick2>
-          </div>
         </div>
       </div>
     </el-dialog>
@@ -186,6 +126,7 @@ import zs from "./echarts/echartsZs.vue";
 import zsbm from "./echarts/echartZsbm.vue";
 import pick1 from "./echarts/echartPick1.vue";
 import pick2 from "./echarts/echartPick2.vue";
+import eP5 from "./echarts/eP5.vue";
 const props = defineProps({
   dialogShowElderly: {
     type: Boolean,
@@ -234,15 +175,17 @@ onMounted(() => {
 });
 
 const selectChange1 = (e) => {
-  console.log(e,55555);
+  data.selectList1 = data.dataElderly.schoolData[0];
-  if (data.dataElderly.schoolData[e] && data.dataElderly.schoolData[e].bm) {
+  // data.selectList2 = data.dataElderly.schoolData[0].xz;
-    data.pickNum = 0;
+  console.log(data.selectList1 , e,55555);
-    data.selectList1 = data.dataElderly.schoolData[e].zs;
+  // if (data.dataElderly.schoolData[e] && data.dataElderly.schoolData[e].bm) {
-    data.selectList2 = data.dataElderly.schoolData[e].bm;
+  //   data.pickNum = 0;
-  } else {
+  //   data.selectList1 = data.dataElderly.schoolData[e].zs;
-    data.pickNum = 1;
+  //   data.selectList2 = data.dataElderly.schoolData[e].bm;
-    data.selectList1 = data.dataElderly.schoolData[e].zs;
+  // } else {
-  }
+  //   data.pickNum = 1;
+  //   data.selectList1 = data.dataElderly.schoolData[e].zs;
+  // }
 };
 
 //关闭弹框
@@ -357,7 +300,17 @@ const closeDialog = () => {
   width: 100%;
   display: flex;
 }
-
+.yd_title {
+  box-sizing: border-box;
+  width: 98%;
+  // height: 40px;
+  position: relative;
+  overflow: hidden;
+  img {
+    width: 350px;
+    height: 28px;
+  }
+}
 .title {
   margin: 10px auto;
   display: flex;
@@ -460,7 +413,7 @@ const closeDialog = () => {
 .selectLint {
   width: 86%;
   display: flex;
-  margin: 30px 7% 10px;
+  margin: 16px 7%;
   //justify-content: space-between;
   flex-direction: row-reverse;
 

src/view/dialog/echarts/eP5.vue

@@ -0,0 +1,235 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 300px"></div>
+</template>
+
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  // year: {
+  //   type: Array,
+  //   default: () => [],
+  // },
+});
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  nl: [],
+  xz: [],
+  option: {},
+  bg: [],
+});
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a0}:{c0}",
+    },
+
+    grid: {
+      top: "13%",
+      left: "1%",
+      right: "1%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+          rotate: 40,
+        },
+        data: data.xz,
+      },
+    ],
+
+    yAxis: [
+      {
+        name: "年龄段人数",
+        type: "value",
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 16, // 这里设置字体大小为20
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.2)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        z: 1,
+        name: "年龄段人数",
+        type: "bar",
+        data: data.nl,
+        barWidth: 20,
+        label: {
+          show: true,
+          color: "#ffffff",
+          fontSize: 16,
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [
+                {
+                  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: "linear",
+                  x: 0,
+                  x2: 1,
+                  y: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
+                    { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
+                    { offset: 1, color: "rgba(255, 242, 142, .5)" },
+                  ],
+                },
+                {
+                  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)" },
+                  ],
+                },
+              ];
+              return colorList[params.dataIndex % colorList.length];
+            },
+          },
+        },
+      },
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.nl,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [21, 15],
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var colorList = [
+                {
+                  offset: 1,
+                  color: "rgba(23, 237, 255, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(255, 242, 142, 1)",
+                },
+
+                {
+                  offset: 1,
+                  color: "rgba(142, 187, 255, 1)",
+                },
+              ];
+
+              return colorList[params.dataIndex % colorList.length].color;
+            },
+          },
+        },
+        // itemStyle: {
+        //   borderColor: "#2fffa4",
+        //   color: "rgba(142, 187, 255, 1)",
+        // },
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+watch(
+  () => props.list,
+  () => {
+    data.list = props.list;
+    data.nl = data.list.nl;
+    data.xz = data.list.xz;
+    console.log(data.list, "list");
+    getOption();
+    setChart();
+  }
+);
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.nl = data.list.nl;
+    data.xz = data.list.xz;
+    console.log(data.nl, data.xz,"list");
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>