gx

src/view/analyze.vue

@@ -67,7 +67,7 @@
           </div> -->
           <FlipClock :list="minData.minTop"></FlipClock>
         </div>
-        <div style="overflow: hidden; margin-top: 20px">
+        <div style="overflow: hidden">
           <div class="minPie">
             <div class="minPieImg" style="letter-spacing: 1px">
               集聚类型分布
@@ -101,7 +101,60 @@
             <i></i>
           </div>
         </div>
-        <ylXZZC :list1="data.zccs1" :list2="data.zccs2" v-if="showEchart"></ylXZZC>
+        <div class="choose">
+          <div
+            class="choose_0"
+            :class="jz == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('1')"
+          >
+            特困
+          </div>
+          <div
+            class="choose_0"
+            :class="jz == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('2')"
+          >
+            低保
+          </div>
+          <div
+            class="choose_0"
+            :class="jz == '3' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('3')"
+          >
+            低边
+          </div>
+          <div
+            class="choose_0"
+            :class="jz == '4' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('4')"
+          >
+            困难残疾人
+          </div>
+          <div
+            class="choose_0"
+            :class="jz == '5' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('5')"
+          >
+            困难军人
+          </div>
+          <div
+            class="choose_0"
+            :class="jz == '6' ? 'choose_1' : 'choose_2'"
+            @click="jzChange('6')"
+          >
+            困难职工
+          </div>
+        </div>
+        <ePie4
+          :list="data.list.data"
+          :year="data.list.year"
+          v-if="showEchart"
+        ></ePie4>
+        <!-- <ylXZZC
+          :list1="data.zccs1"
+          :list2="data.zccs2"
+          v-if="showEchart"
+        ></ylXZZC> -->
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -157,6 +210,7 @@ import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
 import FlipClock from "./echart_analyze/FlipClock.vue";
+import ePie4 from "./echart_analyze/pie4.vue";
 
 import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
 import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@@ -179,8 +233,48 @@ const jypxList = reactive([
     img: jypx2,
   },
 ]);
+// 救助分析tap切换
+const jz = ref("1");
+const jzChange = (value) => {
+  jz.value = value;
+  data.list = data.dataAnalysis[value -1];
+};
 const showEchart = ref(false);
 const data = reactive({
+  list: {
+    data: ["50", "100", "120", "62", "70"],
+    year: ["2020", "2021", "2022", "2023", "2024"],
+  },
+  list1: {},
+  list2: {},
+
+  dataAnalysis: [
+    {
+      data: ["50", "100", "120", "62", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+    {
+      data: ["10", "100", "120", "62", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+    {
+      data: ["60", "100", "120", "62", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+    {
+      data: ["40", "100", "120", "62", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+    {
+      data: ["50", "190", "120", "62", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+    {
+      data: ["50", "100", "120", "82", "70"],
+      year: ["2020", "2021", "2022", "2023", "2024"],
+    },
+  ], //数据分析
+
   datashow: null,
   backgroundImageUrl: ViewDataimg,
   backgroundImageUrl1: ViewDataimg1,
@@ -363,42 +457,42 @@ const getData = async () => {
         data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key];
       });
       data.wjybrysl = res.data.wjybrysl; //医保
-    //   const mappings = [
+      //   const mappings = [
-    //   { key: 'ylzzwyrs', dataKey: 'ylzzwy' },
+      //   { key: 'ylzzwyrs', dataKey: 'ylzzwy' },
-    //   { key: 'dbzyrs', dataKey: 'dbzyrs' },
+      //   { key: 'dbzyrs', dataKey: 'dbzyrs' },
-    //   { key: 'gxyrs', dataKey: 'gxyrs' },
+      //   { key: 'gxyrs', dataKey: 'gxyrs' },
-    //   { key: 'tnbrs', dataKey: 'tnbrs' },
+      //   { key: 'tnbrs', dataKey: 'tnbrs' },
-    //   { key: 'gxzrs', dataKey: 'gxzrs' },
+      //   { key: 'gxzrs', dataKey: 'gxzrs' },
-    //   { key: 'gxtrs', dataKey: 'gxtrs' },
+      //   { key: 'gxtrs', dataKey: 'gxtrs' },
-    //   { key: 'cjrs', dataKey: 'cjrs' },
+      //   { key: 'cjrs', dataKey: 'cjrs' },
-    //   { key: 'dibao', dataKey: 'dbjzrc' },
+      //   { key: 'dibao', dataKey: 'dbjzrc' },
-    //   { key: 'tekun', dataKey: 'tkjzrc' },
+      //   { key: 'tekun', dataKey: 'tkjzrc' },
-    //   { key: 'qtjbrs', dataKey: 'qtjbrs' },
+      //   { key: 'qtjbrs', dataKey: 'qtjbrs' },
-    // ];
+      // ];
 
-    // mappings.forEach((mapping, index) => {
+      // mappings.forEach((mapping, index) => {
-    //   data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey];
+      //   data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey];
-    //   data.ViewData[index].value = res.data.dataShow[mapping.key].total;
+      //   data.ViewData[index].value = res.data.dataShow[mapping.key].total;
-    // });
+      // });
       data.leftCenterYear = res.data.dataShow.year;
       // data.ViewData[0].data = res.data.dataShow.ylzzwyrs.ylzzwy; //医保支出万元以上
       // data.ViewData[0].value = res.data.dataShow.ylzzwyrs.total; //医保支出万元以上年份
       // data.ViewData[1].data = res.data.dataShow.dbzyrs.dbzyrs; //大病住院
       // data.ViewData[1].value = res.data.dataShow.dbzyrs.total; //大病住院年份
-        data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
+      data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
-        data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
+      data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
-        data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病
+      data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病
-        data.ViewData[3].value = res.data.dataShow.tnbrs.total; //糖尿病年份
+      data.ViewData[3].value = res.data.dataShow.tnbrs.total; //糖尿病年份
       // data.ViewData[4].data = res.data.dataShow.gxzrs.gxzrs; //高血脂
       // data.ViewData[4].value = res.data.dataShow.gxzrs.total; //高血脂年份
       // data.ViewData[5].data = res.data.dataShow.gxtrs.gxtrs; //高血糖
       // data.ViewData[5].value = res.data.dataShow.gxtrs.total; //高血糖年份
       // data.ViewData[6].data = res.data.dataShow.cjrs.cjrs; //残疾
       // data.ViewData[6].value = res.data.dataShow.cjrs.total; //残疾年份
-        data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; //低保
+      data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; //低保
-        data.ViewData[7].value = res.data.dataShow.dibao.total; //低保年份
+      data.ViewData[7].value = res.data.dataShow.dibao.total; //低保年份
-        data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; //特困
+      data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; //特困
-        data.ViewData[8].value = res.data.dataShow.tekun.total; //特困年份
+      data.ViewData[8].value = res.data.dataShow.tekun.total; //特困年份
       // data.ViewData[9].data = res.data.dataShow.qtjbrs.qtjbrs; //其他疾病
       // data.ViewData[9].value = res.data.dataShow.qtjbrs.total; //其他疾病年份
       showEchart.value = true;
@@ -493,6 +587,11 @@ onBeforeUnmount(() => {
 }
 
 .center_1 {
+  background-image: url(@/assets/images/sjfx/sjfx6.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_2 {
   background-image: url(@/assets/images/sjfx/ymt.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -812,11 +911,44 @@ onBeforeUnmount(() => {
 .jypx {
   width: 100%;
   height: 200px;
-  margin: 20px 0;
+  // margin: 20px 0;
+  margin-bottom: 10px;
   position: relative;
   display: flex;
   align-items: center;
 }
+
+.choose {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0;
+  .choose_0 {
+    cursor: pointer;
+    width: 110px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    font-size: 15px;
+    color: #ffffff;
+    margin-right: 10px;
+  }
+  // .choose_0:last-child {
+  //   margin-right: 0px;
+  // }
+  .choose_1 {
+    background-image: url(@/assets/images/sjfx/sjfx7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .choose_2 {
+    background-image: url(@/assets/images/sjfx/sjfx8.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
 .minPieImg2 {
   position: absolute;
   width: 137px;

src/view/echart_analyze/pie4.vue

@@ -0,0 +1,194 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [6280, 6280, 6280, 5924, 1824],
+  year: [2020, 2021, 2022, 2023, 2024],
+  bg: [0, 0, 0, 0, 0],
+  option: {},
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a0}:{c0} ",
+    },
+    grid: {
+      top: "15%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: {
+      name: "人数/次",
+      type: "value",
+      nameTextStyle: {
+        // 设置Y轴名称的样式
+        fontSize: 14, // 这里设置字体大小为20
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+    series: [
+      {
+        name: "手工零星报销人数",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+        smooth: true,
+        symbolSize: 10,
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          fontSize: 14,
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        // areaStyle: {
+        //   color: "#F4F65B",
+        //   normal: {
+        //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+        //     color: new echarts.graphic.LinearGradient(
+        //       0,
+        //       0,
+        //       0,
+        //       1,
+        //       [
+        //         {
+        //           offset: 0,
+        //           // color: 'RGBA(184, 204, 241, 1)'
+        //           color: "rgba(0, 252, 255, 0.50)",
+        //         },
+        //         {
+        //           offset: 1,
+        //           color: "rgba(0, 252, 255, 0)",
+        //         },
+        //       ],
+        //       false
+        //     ),
+        //     shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        //   },
+        // },
+
+        data: data.list,
+      },
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+watch(
+  () => props.list,
+  (newVal, oldVal) => {
+    data.list = newVal;
+    // data.year = props.year;
+    console.log(data.list,data.year,newVal,'数据分析');
+    getOption();
+    setChart();
+  }
+);
+watch(
+  () => props.year,
+  (newVal, oldVal) => {
+    data.year = newVal;
+    getOption();
+    setChart();
+  }
+);
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.year;
+    // console.log(data.list,data.year,'数据分析');
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>