gx

src/view/echarts_work/eP3.vue

@@ -3,26 +3,60 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 
 const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  list1: [],
+  list2: [],
+  list3: [],
+  lineData: [],
+  lineData1: [],
+  year: [],
+  option: {},
+  initialLegendData: ["特困救助金额", "低保救助金额"],
+  initialLegendData1: ["特困救助人次", "低保救助人次", "低边救助人次"],
+});
 
-const data = [120, 200, 50, 80, 70];
+const data1 = [120, 200, 50, 80, 70];
 const data2 = [12, 20, 5, 8, 7];
 const data3 = [20, 100, 40, 80, 70];
 const lineData = [1500, 2300, 240, 2180, 1350];
 const lineData2 = [1000, 2000, 400, 1800, 2333];
-const max = data
+// const max = data
-  .concat(lineData, lineData2, data2, data3)
+//   .concat(lineData, lineData2, data2, data3)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-const maxRs = data
+// const maxRs = data
-  .concat(data2, data3)
+//   .concat(data2, data3)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
-const maxJe = lineData
+// const maxJe = lineData
-  .concat(lineData2)
+//   .concat(lineData2)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
 // 背景颜色
 const color = [
   {
@@ -33,15 +67,16 @@ const color = [
     y2: 1,
   },
 ];
-const option = {
+const getOption = () => {
+  data.option = {
     tooltip: {
       trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
+      formatter:
-  
+        "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
     },
     legend: [
       {
-      data: ["特困救助金额", "低保救助金额"],
+        data: data.initialLegendData,
         top: "3%",
         textStyle: {
           fontSize: 14,
@@ -49,7 +84,7 @@ const option = {
         },
       },
       {
-      data: ["特困救助人次", "低保救助人次", "低边救助人次"],
+        data: data.initialLegendData1,
         top: "13%",
         textStyle: {
           fontSize: 14,
@@ -83,12 +118,12 @@ const option = {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.year,
       },
       {
         type: "category",
         show: false,
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.year,
       },
     ],
     yAxis: [
@@ -143,7 +178,6 @@ const option = {
             color: "#ffffff",
             fontSize: 14,
           },
-
         },
         axisLine: {
           //y轴线的颜色以及宽度
@@ -186,7 +220,7 @@ const option = {
       {
         yAxisIndex: 1,
         name: "特困救助金额",
-      data: lineData,
+        data: data.lineData,
         type: "line", //线状图
         itemStyle: {
           borderColor: "#00FCFF",
@@ -197,7 +231,7 @@ const option = {
       {
         yAxisIndex: 1,
         name: "低保救助金额",
-      data: lineData2,
+        data: data.lineData1,
         type: "line", //线状图
         itemStyle: {
           borderColor: "#00FCFF",
@@ -208,7 +242,7 @@ const option = {
       {
         yAxisIndex: 0,
         name: "特困救助人次",
-      data: data,
+        data: data.list1,
         barWidth: 10,
         type: "bar",
         itemStyle: {
@@ -227,7 +261,7 @@ const option = {
       {
         yAxisIndex: 0,
         name: "低保救助人次",
-      data: data2,
+        data: data.list2,
         barWidth: 10,
         type: "bar",
         itemStyle: {
@@ -246,7 +280,7 @@ const option = {
       {
         yAxisIndex: 0,
         name: "低边救助人次",
-      data: data3,
+        data: data.list3,
         barWidth: 10,
         type: "bar",
         itemStyle: {
@@ -268,7 +302,7 @@ const option = {
         itemStyle: {
           color: "rgba(180, 180, 180, 0.2)", //外阴影背景
         },
-      data: data.map(() => 100),
+        data: data.list.subsidyInformation.map(() => 100),
         barWidth: 60, //外阴影背景宽
         emphasis: {
           itemStyle: {
@@ -294,23 +328,40 @@ const option = {
         type: "bar",
       },
     ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
+  data.list3 = [];
+  data.lineData = [];
+  data.lineData1 = [];
+  data.list.subsidyInformation.forEach((item) => {
+    data.list1.push(item.btsx); //特困补贴金额
+    data.list2.push(item.btje1); //低保补贴金额
+    data.list3.push(item.btje2); //特困补贴人数
+    data.lineData.push(item.btje3); //低保补贴人数
+    data.lineData1.push(item.btje4); //低边补贴人数
+  });
+  // console.log("补贴人2", data.list1, data.list2);
 };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-  // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-  // Vue3中： 需要引入
+    data.year = props.list.year;
-  var myChart = echarts.init(chart.value);
+    // console.log(data.list, "生活");
-
+    setChart1();
-  // init(); // vue3.2没有this
+    getOption();
-  // 使用刚指定的配置项和数据显示图表。
+    setChart();
-  myChart.setOption(option);
+  }, 600);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
 </script>
 

src/view/echarts_work/eP4.vue

@@ -300,7 +300,7 @@ onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
     setChart1();
-    console.log(data.list, data.list1, data.list2, "教育");
+    // console.log(data.list, data.list1, data.list2, "教育");
     getOption();
     setChart();
   }, 600);

src/view/work.vue

@@ -56,7 +56,7 @@
       </div>
       <div class="flex1">
         <div class="yd_title center_1"></div>
-        <eP3></eP3>
+        <eP3 :list="data.lifeAssistance1"></eP3>
       </div>
       <div class="flex1">
         <div class="fundingBox">
@@ -181,8 +181,8 @@ const jz = ref([
 const jzChange = (index, value) => {
   jz.value[index].choose = value;
   if (index === 0) {
-    data.list2 = value === "1" ? data.education : data.education1;
+    data.list2 = value === "1" ? data.education : data.medical;
-    console.log(111, jz.value[index].choose);
+    // console.log(111, jz.value[index].choose);
   } else if (index === 1) {
     data.list = value === "1" ? data.housing : data.temporary;
   } else if (index === 2) {
@@ -209,7 +209,7 @@ const data = reactive({
     ],
     year: ["2019"],
   }, //教育
-  education1: {
+  medical: {
     data: [
       {
         nf: "2019", //救助年份
@@ -248,6 +248,19 @@ const data = reactive({
       },
     ],
   }, //生活类救助模块
+  lifeAssistance1: {
+    subsidyInformation: [
+      {
+        nf: "2019", //救助年份
+        btsx: "11", //特困补贴金额
+        btje1: "22", //低保补贴金额
+        btje2: "33", //特困补贴人数
+        btje3: "44", //低保补贴人数
+        btje4: "55", //低边补贴人数
+      },
+    ],
+    year: ["2019"],
+  }, //生活类救助模块
   difficultSoldiers: {
     data: [
       {
@@ -308,6 +321,10 @@ const getData = async () => {
       data.education.data = res.data.specialAssistance.education.data;
       data.education.year = res.data.specialAssistance.education.year;
       data.list2 = data.education;
+
+      data.medical.data = res.data.specialAssistance.medical.data;
+      data.medical.year = res.data.specialAssistance.medical.year;
+      data.list2 = data.medical;
       // 住房&临时救助
       data.housing.data = res.data.specialAssistance.housing.data;
       data.housing.year = res.data.specialAssistance.housing.year;