gx

src/view/echarts_work/eP1.vue

@@ -279,6 +279,8 @@ const setChart = () => {
 };
 
 const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
   data.list.data.forEach((item) => {
     data.list1.push(item.jzrs); //救助人数
     data.list2.push(item.jzje); //救助金额

src/view/echarts_work/eP2.vue

@@ -9,6 +9,7 @@ import {
   ref,
   reactive,
   defineProps,
+  watch,
   nextTick,
 } from "vue";
 // 局部引入echarts核心模块
@@ -279,11 +280,24 @@ const setChart = () => {
 };
 
 const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
   data.list.data.forEach((item) => {
     data.list1.push(item.jzrs); //救助人数
     data.list2.push(item.jzje); //救助金额
   });
+  // console.log("救助人2", data.list1, data.list2);
 };
+watch(
+  () => props.list,
+  (newVal, oldVal) => {
+    data.list = newVal;
+    // console.log("救助人1", data.list);
+    setChart1();
+    getOption();
+    setChart();
+  }
+);
 
 // 使用生命钩子
 onBeforeMount(() => {

src/view/echarts_work/eP5.vue

@@ -0,0 +1,310 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 330px"></div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  // list2: {
+  //   type: Array,
+  //   default: () => {
+  //     return [];
+  //   },
+  // },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [],
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  initialLegendData: ["困难军人生活补贴人数", "困难军人生活补贴金额"],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    },
+    legend: {
+      show: true,
+      data: data.initialLegendData,
+      top: "3%",
+      textStyle: {
+        fontSize: 14,
+        color: "#ffffff", //上文字标题颜色
+      },
+    },
+    grid: {
+      left: "6%",
+      right: "9%",
+      bottom: "5%",
+      containLabel: true,
+      color: "#ffffff",
+      fontSize: 14,
+    },
+    calculable: true,
+
+    xAxis: [
+      {
+        type: "category",
+
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        // data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.list.year,
+      },
+      {
+        type: "category",
+        show: false,
+        data: data.list.year,
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        scale: true,
+        name: "补贴人数",
+        min: 0,
+        splitLine: {
+          //分割线配置
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            fontSize: 14,
+            color: "#ffffff",
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        type: "value",
+        scale: true,
+        min: 0,
+
+        name: "补贴金额/万",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        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: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+    series: [
+      {
+        yAxisIndex: 1,
+        name: "困难军人生活补贴金额",
+        data: data.list2,
+        type: "line", //线状图
+        stack: "Total",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "困难军人生活补贴人数",
+        data: data.list1,
+        barWidth: 20,
+        type: "bar",
+        label: {
+          show: true,
+          // position: "insideTop",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        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: 2,
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(64, 247, 176, 0.25)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(17, 34, 64, 0.25)",
+                },
+              ],
+            },
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: data.list.year.map(() => 100),
+        barWidth: 50,
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
+  data.list.data.forEach((item) => {
+    data.list1.push(item.jzrs); //补贴人数
+    data.list2.push(item.jzje); //补贴金额
+  });
+  // console.log("补贴人2", data.list1, data.list2);
+};
+watch(
+  () => props.list,
+  (newVal, oldVal) => {
+    data.list = newVal;
+    // console.log("补贴人1", data.list);
+    setChart1();
+    getOption();
+    setChart();
+  }
+);
+
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    setChart1();
+    // console.log(data.list, data.list1, data.list2, "教育");
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>

src/view/work.vue

@@ -2,10 +2,7 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div
+        <div class="yd_title left_1"></div>
-          class="yd_title left_1"
-
-        ></div>
         <div class="choose">
           <div
             :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
@@ -41,13 +38,13 @@
             自然灾害
           </div> -->
           <div
-            :class="jz[1].choose == '3' ? 'choose_1' : 'choose_2'"
+            :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(1, '3')"
+            @click="jzChange(1, '2')"
           >
             临时救助
           </div>
         </div>
-        <eP2 :list="data.housing"></eP2>
+        <eP2 :list="data.list"></eP2>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -110,7 +107,8 @@
             困难职工
           </div>
         </div>
-        <eP4></eP4>
+        <eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5>
+        <eP4 v-else :list="data.difficultSoldiers"></eP4>
       </div>
       <div class="flex1">
         <div class="yd_title right_2"></div>
@@ -154,6 +152,7 @@ import eP1 from "./echarts_work/eP1.vue";
 import eP2 from "./echarts_work/eP2.vue";
 import eP3 from "./echarts_work/eP3.vue";
 import eP4 from "./echarts_work/eP4.vue";
+import eP5 from "./echarts_work/eP5.vue";
 import ePjz from "./echarts_work/ePjz.vue";
 import http from "@/utils/request.js";
 // 专项&其他救助切换
@@ -175,9 +174,26 @@ const jz = ref([
 ]);
 const jzChange = (index, value) => {
   jz.value[index].choose = value;
+  switch (index) {
+    case 0:
+      console.log(111, jz.value[index].choose);
+
+      break;
+    case 1:
+      value == "1" ? (data.list = data.housing) : (data.list = data.temporary);
+      console.log(data.list, jz.value[index].choose);
+      break;
+    case 2:
+      console.log(333, jz.value[index].choose);
+      break;
+
+    default:
+      break;
+  }
 };
 
 const data = reactive({
+  list: {},
   education: {
     data: [
       {
@@ -198,6 +214,16 @@ const data = reactive({
     ],
     year: ["2019"],
   }, //住房
+  temporary: {
+    data: [
+      {
+        nf: "2019", //救助年份
+        jzrs: "4202", //救助人数
+        jzje: "1523", //救助金额
+      },
+    ],
+    year: ["2019"],
+  }, //临时救助
   lifeAssistance: {
     subsidyInformation: [
       {
@@ -206,6 +232,16 @@ const data = reactive({
       },
     ],
   }, //生活类救助模块
+  difficultSoldiers: {
+    data: [
+      {
+        nf: "2019", //补贴年份
+        jzrs: "62", //补贴人数
+        jzje: "6.24", //补贴金额 万元
+      },
+    ],
+    year: ["2019"],
+  }, //困难军人
   diversification: {
     hszhxms: [
       {
@@ -234,6 +270,9 @@ const getData = async () => {
       // 住房&临时救助
       data.housing.data = res.data.specialAssistance.housing.data;
       data.housing.year = res.data.specialAssistance.housing.year;
+      data.list = data.housing;
+      data.temporary.data = res.data.specialAssistance.temporary.data;
+      data.temporary.year = res.data.specialAssistance.temporary.year;
       // 救助概况
       // 生活类救助模块
       // 一卡通补贴
@@ -245,6 +284,11 @@ const getData = async () => {
       });
       // 弱势群体补贴
       // 困难残疾人&困难军人&困难职工
+      data.difficultSoldiers.data =
+        res.data.underprivileged.difficultSoldiers.data;
+      data.difficultSoldiers.year =
+        res.data.underprivileged.difficultSoldiers.year;
+
       // 多元化力量参与
       data.diversification.hszhxms = res.data.diversification.hszhxms;
     }