Merge branch 'main' of git.zdool.com:xs/ggfwjsc

2024-06-03 14:21:03 +08:00 · 2024-06-03 14:21:03 +08:00 · 681ad8afc3
parent d3ccd8472a 94a062d608
commit 681ad8afc3
4 changed files with 384 additions and 286 deletions
--- a/src/view/echarts_work/eP3.vue
+++ b/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
-  .concat(lineData, lineData2, data2, data3)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-const maxRs = data
-  .concat(data2, data3)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
-const maxJe = lineData
-  .concat(lineData2)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+// const max = data
+//   .concat(lineData, lineData2, data2, data3)
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// const maxRs = data
+//   .concat(data2, data3)
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+// const maxJe = lineData
+//   .concat(lineData2)
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
 // 背景颜色
 const color = [
  {
@ -33,284 +67,301 @@ const color = [
    y2: 1,
  },
 ];
-const option = {
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
-  
-  },
-  legend: [
-    {
-      data: ["特困救助金额", "低保救助金额"],
-      top: "3%",
-      textStyle: {
-        fontSize: 14,
-        color: "#ffffff", //上文字标题颜色
-      },
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter:
+        "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
    },
-    {
-      data: ["特困救助人次", "低保救助人次", "低边救助人次"],
-      top: "13%",
-      textStyle: {
-        fontSize: 14,
-        color: "#ffffff", //上文字标题颜色
-      },
-    },
-  ],
-
-  grid: {
-    top: "28%",
-    left: "6%",
-    right: "9%",
-    bottom: "0%",
-    containLabel: true,
-    color: "#ffffff",
-    fontSize: 14,
-  },
-  calculable: true,
-  color,
-  xAxis: [
-    {
-      type: "category",
-
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
+    legend: [
+      {
+        data: data.initialLegendData,
+        top: "3%",
        textStyle: {
-          color: "#ffffff",
          fontSize: 14,
+          color: "#ffffff", //上文字标题颜色
        },
      },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-      data: ["2019", "2020", "2021", "2022", "2023"],
-    },
-    {
-      type: "category",
-      show: false,
-      data: ["2019", "2020", "2021", "2022", "2023"],
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      scale: true,
-      name: "救助人数",
-
-      splitLine: {
-        //分割线配置
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          fontSize: 14,
-          width: 1,
-        },
-      },
-      axisLabel: {
-        //y轴文字的配置
+      {
+        data: data.initialLegendData1,
+        top: "13%",
        textStyle: {
-          color: "#ffffff",
          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,
-        },
+    grid: {
+      top: "28%",
+      left: "6%",
+      right: "9%",
+      bottom: "0%",
+      containLabel: true,
+      color: "#ffffff",
+      fontSize: 14,
+    },
+    calculable: true,
+    color,
+    xAxis: [
+      {
+        type: "category",

+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: data.year,
      },
-      axisLine: {
-        //y轴线的颜色以及宽度
+      {
+        type: "category",
        show: false,
-        lineStyle: {
-          color: "#ffffff",
+        data: data.year,
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        scale: true,
+        name: "救助人数",
+
+        splitLine: {
+          //分割线配置
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        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,
-          width: 1,
-          type: "solid",
+          color: "#ffffff",
+          lineHeight: 19,
+          fontFamily: "MicrosoftYaHei",
        },
      },
-    },
-         {
-      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,
-        color: "#ffffff",
-        lineHeight: 19,
-        fontFamily: "MicrosoftYaHei",
-      },
-    },
-  ],
-  series: [
-    {
-      yAxisIndex: 1,
-      name: "特困救助金额",
-      data: lineData,
-      type: "line", //线状图
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
-      },
-    },
-    {
-      yAxisIndex: 1,
-      name: "低保救助金额",
-      data: lineData2,
-      type: "line", //线状图
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#2468FF",
-      },
-    },
-    {
-      yAxisIndex: 0,
-      name: "特困救助人次",
-      data: data,
-      barWidth: 10,
-      type: "bar",
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(142, 187, 255, 1)",
-          },
-          {
-            offset: 1,
-            color: "rgba(142, 187, 255, 0.20)",
-          },
-        ]),
-      },
-    },
-    {
-      yAxisIndex: 0,
-      name: "低保救助人次",
-      data: data2,
-      barWidth: 10,
-      type: "bar",
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(23, 136, 255, 1)",
-          },
-          {
-            offset: 1,
-            color: "rgba(23, 136, 255, 0.20)",
-          },
-        ]),
-      },
-    },
-    {
-      yAxisIndex: 0,
-      name: "低边救助人次",
-      data: data3,
-      barWidth: 10,
-      type: "bar",
-      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)",
-          },
-        ]),
-      },
-    },
-    {
-      yAxisIndex: 2,
-      xAxisIndex: 1,
-      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
-      },
-      data: data.map(() => 100),
-      barWidth: 60, //外阴影背景宽
-      emphasis: {
+    ],
+    series: [
+      {
+        yAxisIndex: 1,
+        name: "特困救助金额",
+        data: data.lineData,
+        type: "line", //线状图
        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)",
-              },
-            ],
-          },
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
        },
      },
-      type: "bar",
-    },
-  ],
+      {
+        yAxisIndex: 1,
+        name: "低保救助金额",
+        data: data.lineData1,
+        type: "line", //线状图
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "特困救助人次",
+        data: data.list1,
+        barWidth: 10,
+        type: "bar",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(142, 187, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(142, 187, 255, 0.20)",
+            },
+          ]),
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "低保救助人次",
+        data: data.list2,
+        barWidth: 10,
+        type: "bar",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(23, 136, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(23, 136, 255, 0.20)",
+            },
+          ]),
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "低边救助人次",
+        data: data.list3,
+        barWidth: 10,
+        type: "bar",
+        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)",
+            },
+          ]),
+        },
+      },
+      {
+        yAxisIndex: 2,
+        xAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+        },
+        data: data.list.subsidyInformation.map(() => 100),
+        barWidth: 60, //外阴影背景宽
+        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)",
+                },
+              ],
+            },
+          },
+        },
+        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(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value);
-
-  // init(); // vue3.2没有this
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.list.year;
+    // console.log(data.list, "生活");
+    setChart1();
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>

--- a/src/view/echarts_work/eP4.vue
+++ b/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);
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@ -1,5 +1,8 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 260px"></div>
+  <div
+    ref="chart"
+    style="width: 100%; height: 260px"
+  ></div>
 </template>

 <script setup>
@ -123,25 +126,52 @@ const getOption = () => {
    ],
    series: [
      {
+        z: 1,
+        name: '上部1',
+        type: 'pictorialBar',
+        symbolPosition: 'end',
+        data: data.list1,
+        symbol: 'diamond',
+        symbolOffset: ['-50%', '-50%'],
+        symbolSize: [20, 19],
+        itemStyle: {
+          borderColor: '#2fffa4',
+          color: '#2fffa4'
+        },
+      },
+      {
+        z: 1,
        name: "职工养老保险发放人次",
        type: "bar",
        data: data.list1,
        barWidth: "18%",
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(142, 187, 255, 1)",
-            },
-            {
-              offset: 1,
-              color: "rgba(142, 187, 255, 0.20)",
-            },
-          ]),
+        itemStyle: {                                      
+          color: {
+            type: 'linear',
+            x: 0, x2: 1, y: 0, y2: 0,
+            colorStops: [
+              { offset: 0, color: 'rgba(29, 245, 160, .7)' },
+              { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
+              { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
+              { offset: 1, color: 'rgba(29, 245, 160, .3)' }
+            ]
+          }
        },
+        // itemStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: "rgba(142, 187, 255, 1)",
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: "rgba(142, 187, 255, 0.20)",
+        //     },
+        //   ]),
+        // },
        label: {
          show: true,
-           position:'top',
+          position: 'top',
          color: "#ffffff",
          formatter: function (data) {
            return data.value;
@ -167,7 +197,7 @@ const getOption = () => {
        },
        label: {
          show: true,
-          position:'top',
+          position: 'top',
          color: "#ffffff",
          formatter: function (data) {
            return data.value;
--- a/src/view/work.vue
+++ b/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;
-    console.log(111, jz.value[index].choose);
+    data.list2 = value === "1" ? data.education : data.medical;
+    // 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;