From 934a6994c9b98a0beb82b7e9eac27455692fb90e Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Thu, 24 Oct 2024 13:21:10 +0800
Subject: [PATCH] gx

---
 src/view/echarts_lysd/gsbx_1.vue | 273 +++++++++++++++++++++++++++++++
 src/view/echarts_lysd/gsbx_2.vue | 273 +++++++++++++++++++++++++++++++
 src/view/table_gk/gk_lysd.vue    |  12 +-
 3 files changed, 555 insertions(+), 3 deletions(-)
 create mode 100644 src/view/echarts_lysd/gsbx_1.vue
 create mode 100644 src/view/echarts_lysd/gsbx_2.vue

diff --git a/src/view/echarts_lysd/gsbx_1.vue b/src/view/echarts_lysd/gsbx_1.vue
new file mode 100644
index 0000000..0a0ebb6
--- /dev/null
+++ b/src/view/echarts_lysd/gsbx_1.vue
@@ -0,0 +1,273 @@
+<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: [],
+    year: [],
+    option: {},
+    // max: null,
+  });
+  
+  const getOption = () => {
+    data.option = {
+    //   tooltip: {
+    //     trigger: "axis",
+    //     formatter: "{b0}<br/> {a0}:{c0}",
+    //   },
+    //   legend: {
+    //     data: ["救助金额", "救助人数"],
+    //     top: "8%",
+    //     textStyle: {
+    //       fontSize: 14,
+    //       color: "#ffffff", //上文字标题颜色
+    //     },
+    //   },
+      grid: {
+        left: "6%",
+        right: "9%",
+        bottom: "0%",
+        containLabel: true,
+        color: "#ffffff",
+      },
+      calculable: true,
+  
+      xAxis: [
+        {
+          type: "category",
+  
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 14,
+            },
+          },
+          axisTick: {
+            show: false, // 设置轴刻度不显示
+          },
+          // data: ["2019", "2020", "2021", "2022", "2023"],
+          data: data.year,
+        },
+        {
+          type: "category",
+          show: false,
+          data: data.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",
+          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: [
+        {
+          z: 1,
+          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: {
+              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: "bar",
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          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.year.map(() => 100),
+          // data: 100,
+          barWidth: 50,
+        },
+        //顶部圆片
+        {
+          z: 1,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: data.list1,
+          symbol: "diamond",
+          symbolOffset: ["0%", "-50%"],
+          symbolSize: [21, 15],
+  
+          itemStyle: {
+            borderColor: "#2fffa4",
+            color: "rgba(23, 237, 255, 1)",
+          },
+        },
+      ],
+    };
+  };
+  
+  const setChart = () => {
+    var myChart = echarts.init(chart.value);
+    myChart.setOption(data.option);
+  };
+  
+  const setChart1 = () => {
+    // if (data.list.length !== 0) {
+    //   data.list1 = [];
+    //   data.list.data.forEach((item) => {
+    //     data.list1.push(item.jzrs); //救助人数
+    //   });
+    // }
+  };
+  watch(
+    () => props.list,
+    (newVal, oldVal) => {
+      data.list1 = newVal;
+      setChart1();
+      getOption();
+      setChart();
+    }
+  );
+  
+  // 使用生命钩子
+  onBeforeMount(() => {
+    setTimeout(() => {
+      data.list1 = props.list;
+      data.year=props.year;
+    //   setChart1();
+      getOption();
+      setChart();
+    }, 600);
+  });
+  </script>
+  
+  <style scoped></style>
+  
\ No newline at end of file
diff --git a/src/view/echarts_lysd/gsbx_2.vue b/src/view/echarts_lysd/gsbx_2.vue
new file mode 100644
index 0000000..3b1afdd
--- /dev/null
+++ b/src/view/echarts_lysd/gsbx_2.vue
@@ -0,0 +1,273 @@
+<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: [],
+    year: [],
+    option: {},
+    // max: null,
+  });
+  
+  const getOption = () => {
+    data.option = {
+    //   tooltip: {
+    //     trigger: "axis",
+    //     formatter: "{b0}<br/> {a0}:{c0}",
+    //   },
+    //   legend: {
+    //     data: ["救助金额", "救助人数"],
+    //     top: "8%",
+    //     textStyle: {
+    //       fontSize: 14,
+    //       color: "#ffffff", //上文字标题颜色
+    //     },
+    //   },
+      grid: {
+        left: "6%",
+        right: "9%",
+        bottom: "0%",
+        containLabel: true,
+        color: "#ffffff",
+      },
+      calculable: true,
+  
+      xAxis: [
+        {
+          type: "category",
+  
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 14,
+            },
+          },
+          axisTick: {
+            show: false, // 设置轴刻度不显示
+          },
+          // data: ["2019", "2020", "2021", "2022", "2023"],
+          data: data.year,
+        },
+        {
+          type: "category",
+          show: false,
+          data: data.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",
+          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: [
+        {
+          z: 1,
+          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: {
+            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: "bar",
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          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.year.map(() => 100),
+          // data: 100,
+          barWidth: 50,
+        },
+        //顶部圆片
+        {
+          z: 1,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: data.list1,
+          symbol: "diamond",
+          symbolOffset: ["0%", "-50%"],
+          symbolSize: [21, 15],
+  
+          itemStyle: {
+            borderColor: "#2fffa4",
+            color: "rgba(255, 242, 142, 1)",
+          },
+        },
+      ],
+    };
+  };
+  
+  const setChart = () => {
+    var myChart = echarts.init(chart.value);
+    myChart.setOption(data.option);
+  };
+  
+  const setChart1 = () => {
+    // if (data.list.length !== 0) {
+    //   data.list1 = [];
+    //   data.list.data.forEach((item) => {
+    //     data.list1.push(item.jzrs); //救助人数
+    //   });
+    // }
+  };
+  watch(
+    () => props.list,
+    (newVal, oldVal) => {
+      data.list1 = newVal;
+      setChart1();
+      getOption();
+      setChart();
+    }
+  );
+  
+  // 使用生命钩子
+  onBeforeMount(() => {
+    setTimeout(() => {
+      data.list1 = props.list;
+      data.year=props.year;
+    //   setChart1();
+      getOption();
+      setChart();
+    }, 600);
+  });
+  </script>
+  
+  <style scoped></style>
+  
\ No newline at end of file
diff --git a/src/view/table_gk/gk_lysd.vue b/src/view/table_gk/gk_lysd.vue
index 2f9528d..1e2099d 100644
--- a/src/view/table_gk/gk_lysd.vue
+++ b/src/view/table_gk/gk_lysd.vue
@@ -99,7 +99,8 @@
             累计待遇金额
           </div>
         </div>
-        <!-- <eP4 :list="data.list2"></eP4> -->
+        <gsbx_1 :list="data.gsbx.list1" :year="data.gsbx.year" v-if="jz[1].choose == '1'"></gsbx_1>
+        <gsbx_2 :list="data.gsbx.list1" :year="data.gsbx.year" v-if="jz[1].choose == '2'"></gsbx_2>
       </div>
     </div>
   </div>
@@ -113,7 +114,8 @@ import eP2 from "../echarts_lysd/eP2.vue";
 import eP3 from "../echarts_lysd/eP3.vue";
 import eP4 from "../echarts_lysd/eP4.vue";
 import eP5 from "../echarts_lysd/eP5.vue";
-
+import gsbx_1 from "../echarts_lysd/gsbx_1.vue";
+import gsbx_2 from "../echarts_lysd/gsbx_2.vue";
 import jy1 from "@/assets/images/lysd/jy1.png";
 import jy2 from "@/assets/images/lysd/jy2.png";
 import jy3 from "@/assets/images/lysd/jy3.png";
@@ -217,7 +219,11 @@ const data = reactive({
   jyfws: {}, // 就业服务
   rczy: {}, // 人才资源统计
   sybx: {}, // 失业保险概况
-  gsbx: {}, //工伤保险
+  gsbx: {
+    list1:[100,200,300],
+    list2:[],
+    year:['5','6','7']
+  }, //工伤保险
 });
 const showEchart = ref(false);
 // tap切换 失业&工伤