gx

src/view/analyze.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="module">
     <div class="displayFlex left_bg">
-      <div >
+      <div class="flex11">
         <div class="yd_title left_1">
           <div class="animate-border">
             <i></i>
@@ -25,21 +25,29 @@
         </div>
         <div class="ViewData">
           <div class="ViewDatalist">
-            <!-- <div class="ViewDataTop" v-for="item in data.ViewData.name">
+            <div
-              <div class="ViewDataTopimg">
+              class="ViewDataTop"
-                {{ item }}
+              v-for="(item, index) in data.ViewData"
+              :key="item.name"
+              @click="onViewData(item.name, index)"
+            >
+              <div
+                class="ViewDataTopimg"
+                :class="{ ViewDataBottomimg: item.show }"
+              >
+                {{ item.value }}
               </div>
-              <div class="ViewDataTopimg_1"></div>
+              <div
-              <span>{{ item }}</span>
+                class="ViewDataTopimg_1"
+                :class="{ ViewDataBottomimg_1: item.show }"
+              ></div>
+              <span> {{ item.name }}</span>
             </div>
-            <div class="ViewDataBottom" v-for="item in 5">
-              <div class="ViewDataBottomimg"></div>
-              <div class="ViewDataBottomimg_1"></div>
-            </div> -->
           </div>
           <eP2
-            :list1="data.leftCenter1"
+            :list="data.DataViewing"
-            :list2="data.leftCenter2"
+            :list1="data.leftCenter3"
+            :list2="data.leftCenter4"
             :year="data.leftCenterYear"
           ></eP2>
         </div>
@@ -63,9 +71,11 @@
             {{ item }}
           </div>
         </div>
-        <div style="overflow:hidden;margin-top: 20px;">
+        <div style="overflow: hidden; margin-top: 20px">
           <div class="minPie">
-            <div class="minPieImg" style="letter-spacing: 1px;">集聚类型分布</div>
+            <div class="minPieImg" style="letter-spacing: 1px">
+              集聚类型分布
+            </div>
             <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
           </div>
           <div class="minPie">
@@ -74,12 +84,12 @@
           </div>
         </div>
 
-        <div style="width:100%;height:200px;margin: 20px 0;">
+        <div style="width: 100%; height: 200px; margin: 20px 0">
           <img
             src="../assets/images/sjfx/minImg.jpg"
-            style="width:100%;height:100%;"
+            style="width: 100%; height: 100%"
             alt=""
-          >
+          />
         </div>
       </div>
       <div class="flex1">
@@ -109,11 +119,7 @@
             <i></i>
           </div>
         </div>
-        <img
+        <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
-          src="@/assets/images/sjfx/right3D.png"
-          alt=""
-          class="right3d"
-        />
         <!-- <right2></right2> -->
       </div>
       <div class="flex1">
@@ -123,11 +129,7 @@
             <i></i>
           </div>
         </div>
-        <img
+        <img src="@/assets/images/sjfx/map.png" alt="" class="map" />
-          src="@/assets/images/sjfx/map.png"
-          alt=""
-          class="map"
-        />
       </div>
     </div>
   </div>
@@ -145,8 +147,16 @@ import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
 
+import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
+import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
+import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
+import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
+
 const showR = ref(false); //loading
 const data = reactive({
+  datashow: null,
+  backgroundImageUrl: ViewDataimg,
+  backgroundImageUrl1: ViewDataimg1,
   leftTop1: [],
   gxy: [], //高血压
   whistleblower: {
@@ -155,37 +165,77 @@ const data = reactive({
       time: ["61-70", "71-80", "81-90", "91-100", "100以上"],
     },
   }, //高血压柱状图
-  leftCenter1: ["100", "80", "199", "133", "210"], //大病住院
+
-  leftCenter2: ["100", "120", "199", "133", "210"], //糖尿病
+  ViewData: [
+    {
+      name: "医保支出万元以上",
+      value: "11112",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    },
+    {
+      name: "大病住院",
+      value: "120",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //大病住院
+    },
+    {
+      name: "高血压",
+      value: "2345",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //高血压
+    },
+    {
+      name: "糖尿病",
+      value: "1241",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //糖尿病
+    },
+    {
+      name: "高血脂",
+      value: "1414",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //高血脂
+    },
+    {
+      name: "高血糖",
+      value: "2355",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //高血糖
+    },
+    {
+      name: "残疾",
+      value: "455",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //残疾
+    },
+    {
+      name: "低保",
+      value: "142",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //低保
+    },
+    {
+      name: "特困",
+      value: "98",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //特困
+    },
+    {
+      name: "其他疾病",
+      value: "144",
+      show: false,
+      data: ["100", "120", "199", "133", "210"], //其他疾病
+    },
+  ],
+  DataViewing: {}, //数据查看
+  leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+  leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+  leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
-  ViewData: {
+
-    data: [
+  zccs1: ["图书馆", "交通出行", "景区"], //一码通
-      "11112",
+  zccs2: ["100", "130", "220"], //一码通
-      "120",
-      "2345",
-      "1241",
-      "1414",
-      "2355",
-      "455",
-      "142",
-      "98",
-      "144",
-    ],
-    name: [
-      "医保支出万元以上",
-      "大病住院",
-      "高血压",
-      "高血压",
-      "高血脂",
-      "高血糖",
-      "残疾",
-      "低保",
-      "特困",
-      "其他疾病",
-    ],
-  },
-  zccs1: [  "图书馆","交通出行","景区",],//一码通
-  zccs2: [  "100","130","220",],//一码通
 });
 const minData = reactive({
   minTop: ["4", "9", "1", "6", "2", "人"],
@@ -200,13 +250,56 @@ const minData = reactive({
   minPieData2: {
     wfgz: "1500",
     xstp: "1610",
-    skym: "1610"
+    skym: "1610",
   },
 });
+// 数据查看
+const onViewData = (value, i) => {
+  data.ViewData[i].show = !data.ViewData[i].show;
+  data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
+    name: item.name,
+    data: item.data,
+  }));
+  // console.log(data.DataViewing, 666);
 
-onMounted(() => { });
+  // switch (value) {
+  //   case "医保支出万元以上":
+  //     data.ViewData[i].show = !data.ViewData[i].show;
+  //     break;
+  //   case "大病住院":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "高血压":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "糖尿病":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "高血脂":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "高血糖":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "残疾":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "低保":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "特困":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   case "其他疾病":
+  //     data.ViewData[i].show = true;
+  //     break;
+  //   default:
+  //     break;
+  // }
+};
+onMounted(() => {});
 
-onBeforeMount(() => { });
+onBeforeMount(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -473,53 +566,47 @@ onBeforeMount(() => { });
 }
 .ViewData {
   .ViewDatalist {
-    // display: flex;
+    display: flex;
-    // flex-wrap: wrap;
+    flex-wrap: wrap;
-
+    color: #ffffff;
-    background-image: url(@/assets/images/sjfx/sjfx11.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 550px;
-    height: 300px;
     .ViewDataTop {
+      width: 114px;
       display: flex;
       align-items: center;
       flex-direction: column;
-    }
+
-    .ViewDataBottom {
+      .ViewDataTopimg {
-      display: flex;
+        background-image: url(@/assets/images/sjfx/sjfx.png);
-      align-items: center;
+        background-repeat: no-repeat;
-      flex-direction: column;
+        background-size: 100% 100%;
-    }
+        width: 80px;
-    .ViewDataTopimg {
+        height: 80px;
-      background-image: url(@/assets/images/sjfx/sjfx.png);
+        margin-bottom: -24px;
-      background-repeat: no-repeat;
+        text-align: center;
-      background-size: 100% 100%;
+        line-height: 100px;
-      width: 80px;
+      }
-      height: 80px;
+      .ViewDataTopimg_1 {
-      margin-bottom: -24px;
+        background-image: url(@/assets/images/sjfx/sjfx1.png);
-    }
+        background-repeat: no-repeat;
-    .ViewDataTopimg_1 {
+        background-size: 100% 100%;
-      background-image: url(@/assets/images/sjfx/sjfx1.png);
+        width: 105px;
-      background-repeat: no-repeat;
+        height: 57px;
-      background-size: 100% 100%;
+      }
-      width: 105px;
+      .ViewDataBottomimg {
-      height: 57px;
+        background-image: url(@/assets/images/sjfx/sjfx2.png);
-    }
+        background-repeat: no-repeat;
-    .ViewDataBottomimg {
+        background-size: 100% 100%;
-      background-image: url(@/assets/images/sjfx/sjfx2.png);
+        width: 80px;
-      background-repeat: no-repeat;
+        height: 80px;
-      background-size: 100% 100%;
+        margin-bottom: -24px;
-      width: 80px;
+      }
-      height: 80px;
+      .ViewDataBottomimg_1 {
-      margin-bottom: -24px;
+        background-image: url(@/assets/images/sjfx/sjfx3.png);
-    }
+        background-repeat: no-repeat;
-    .ViewDataBottomimg_1 {
+        background-size: 100% 100%;
-      background-image: url(@/assets/images/sjfx/sjfx3.png);
+        width: 105px;
-      background-repeat: no-repeat;
+        height: 57px;
-      background-size: 100% 100%;
+      }
-      width: 105px;
-      height: 57px;
     }
   }
 }

src/view/echart_analyze/eP2.vue

@@ -3,13 +3,19 @@
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, ref } from "vue";
+import { onBeforeMount, reactive, ref, watch } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
 const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
   list1: {
     type: Array,
     default: () => {
@@ -31,11 +37,13 @@ const props = defineProps({
 });
 
 const data = reactive({
+  list: [],
   list1: [],
   list2: [],
   year: [],
   option: {},
   bg: [],
+  name: [],
 });
 
 const getOption = () => {
@@ -46,7 +54,7 @@ const getOption = () => {
       formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
     },
     legend: {
-      data: ["大病住院", "糖尿病"],
+      data: data.name,
       top: "5%",
       right: "10%",
       textStyle: {
@@ -56,12 +64,11 @@ const getOption = () => {
     },
     grid: {
       top: "25%",
-      left: "10%",
+      left: "6%",
-      right: "10%",
+      right: "6%",
       bottom: "3%",
       containLabel: true,
     },
-
     xAxis: {
       type: "category",
       data: data.year,
@@ -76,7 +83,7 @@ const getOption = () => {
     yAxis: [
       {
         type: "value",
-        name: "大病住院",
+        name: "人数/人",
         splitLine: {
           show: true,
           lineStyle: {
@@ -133,11 +140,8 @@ const getOption = () => {
           fontSize: 14, // 这里设置字体大小为20
         },
         axisLabel: {
+          show: false,
           //坐标轴刻度标签的相关设置
-          textStyle: {
-            color: "#ffffff",
-            fontSize: 16,
-          },
         },
         axisLine: {
           //y轴线的颜色以及宽度
@@ -151,7 +155,6 @@ const getOption = () => {
         },
       },
     ],
-
     series: [
       {
         name: "背景",
@@ -175,7 +178,7 @@ const getOption = () => {
         },
         label: {
           show: true,
-          color: "#ffffff",
+          color: "#2468FF",
           formatter: function (data) {
             return data.value;
           },
@@ -197,7 +200,7 @@ const getOption = () => {
         },
         label: {
           show: true,
-          color: "#ffffff",
+          color: "#00FCFF",
           formatter: function (data) {
             return data.value;
           },
@@ -209,23 +212,97 @@ const getOption = () => {
 };
 
 const setChart = () => {
-  // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
-
-  // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
 };
+// const setChart1 = () => {
+//   if (Object.keys(data.list).length !== 0) {
+//     data.list1 = [];
+//     data.list2 = [];
+//     data.list.data.forEach((item) => {
+//       // data.list1.push(item.jzrs); //救助人数
+//       // data.list2.push(item.jzje); //救助金额
+//       data.option.series.push();
+//     });
+//     data.name = [];
+//     data.list.forEach((item) => {
+//       data.name.push(item.name); //数据名
+//     });
+//     console.log(data.list, data.name, "数据名");
+//   }
+// };
+const setChart1 = () => {
+  data.name = [];
+  if (Object.keys(data.list).length !== 0) {
+    data.list1 = [];
+    data.list2 = [];
+    // data.name = [];
+    data.option.series = [];
+    // Define background series
+    data.option.series.push({
+      name: "背景",
+      type: "bar",
+      data: data.bg,
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    });
+    data.list.forEach((item) => {
+      // console.log(item, "数据名111");
+      data.option.series.push({
+        yAxisIndex: 0,
+        name: item.name,
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+        label: {
+          show: true,
+          color: "#2468FF",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        data: [item.data],
+      });
+    });
+    data.list.forEach((item) => {
+      data.name.push(item.name); //数据名
+    });
 
-// 使用生命钩子
+    console.log(data.list, data.name, "数据名");
+  }
+};
+
+// 监听数据
+watch(
+  () => props.list,
+  (newVal, oldVal) => {
+    setTimeout(() => {
+    data.list = newVal;
+    // console.log("救助人1", data.list);
+    getOption();
+    setChart1();
+    setChart();
+  }, 600);
+  }
+);
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
+    data.list = props.list;
     data.list1 = props.list1;
     data.list2 = props.list2;
     data.year = props.year;
     data.year.forEach(() => {
       data.bg.push(0);
     });
+    setChart1();
     getOption();
     setChart();
   }, 600);