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

src/view/analyze.vue

@@ -24,7 +24,19 @@
           </div>
         </div>
         <div class="ViewData">
-          <div class="ViewDatalist"></div>
+          <div class="ViewDatalist">
+            <!-- <div class="ViewDataTop" v-for="item in data.ViewData.name">
+              <div class="ViewDataTopimg">
+                {{ item }}
+              </div>
+              <div class="ViewDataTopimg_1"></div>
+              <span>{{ item }}</span>
+            </div>
+            <div class="ViewDataBottom" v-for="item in 5">
+              <div class="ViewDataBottomimg"></div>
+              <div class="ViewDataBottomimg_1"></div>
+            </div> -->
+          </div>
           <eP2
             :list1="data.leftCenter1"
             :list2="data.leftCenter2"
@@ -77,6 +89,7 @@
             <i></i>
           </div>
         </div>
+        <ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -127,9 +140,11 @@ import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import http from "@/utils/request.js";
+import Pie3dMt from "./echart_analyze/pie3dMt.vue";
 import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
 import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
+import ylXZZC from "./echart_analyze/ylXZZC.vue";
 
 const showR = ref(false); //loading
 const data = reactive({
@@ -144,6 +159,34 @@ const data = reactive({
   leftCenter1: ["100", "80", "199", "133", "210"], //大病住院
   leftCenter2: ["100", "120", "199", "133", "210"], //糖尿病
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
+  ViewData: {
+    data: [
+      "11112",
+      "120",
+      "2345",
+      "1241",
+      "1414",
+      "2355",
+      "455",
+      "142",
+      "98",
+      "144",
+    ],
+    name: [
+      "医保支出万元以上",
+      "大病住院",
+      "高血压",
+      "高血压",
+      "高血脂",
+      "高血糖",
+      "残疾",
+      "低保",
+      "特困",
+      "其他疾病",
+    ],
+  },
+  zccs1: [  "图书馆","交通出行","景区",],//一码通
+  zccs2: [  "100","130","220",],//一码通
 });
 const minData = reactive({
   minTop: ["4", "9", "1", "6", "2", "人"],
@@ -429,9 +472,58 @@ onBeforeMount(() => { });
 .hypertension {
   display: flex;
 }
-// .ViewData{
+.ViewData {
+  .ViewDatalist {
+    // display: flex;
+    // flex-wrap: wrap;
 
-// }
+    background-image: url(@/assets/images/sjfx/sjfx11.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 550px;
+    height: 300px;
+    .ViewDataTop {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    .ViewDataBottom {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    .ViewDataTopimg {
+      background-image: url(@/assets/images/sjfx/sjfx.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: 80px;
+      height: 80px;
+      margin-bottom: -24px;
+    }
+    .ViewDataTopimg_1 {
+      background-image: url(@/assets/images/sjfx/sjfx1.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: 105px;
+      height: 57px;
+    }
+    .ViewDataBottomimg {
+      background-image: url(@/assets/images/sjfx/sjfx2.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: 80px;
+      height: 80px;
+      margin-bottom: -24px;
+    }
+    .ViewDataBottomimg_1 {
+      background-image: url(@/assets/images/sjfx/sjfx3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: 105px;
+      height: 57px;
+    }
+  }
+}
 .minTopTitle {
   width: 100%;
   height: 28px;

src/view/echart_analyze/ylXZZC.vue

@@ -0,0 +1,258 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 160px"></div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+  defineProps,
+  nextTick,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const emit = defineEmits(["village"]);
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const chart = ref(null); // 创建DOM引用
+
+// const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
+// const datas = ["8", "10", "7", " 23", "25", "250"];
+
+const data = reactive({
+  list1: [],
+  list2: [],
+  option: {},
+});
+
+let zoomShow = true;
+// if (data.length > 7) {
+//   zoomShow = true;
+// } else {
+//   zoomShow = false;
+// }
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    legend: {},
+    grid: {
+      top: "10%",
+      left: "3%",
+      right: "8%",
+      bottom: "3%",
+      containLabel: true,
+      color: "#ffffff",
+      fontSize: 14,
+    },
+    // dataZoom: [
+    //   {
+    //     //在内部可以纵向拖动
+    //     show: zoomShow,
+    //     type: "inside",
+    //     startValue: 0,
+    //     endValue: 10,
+    //     minValueSpan: 2,
+    //     maxValueSpan: 10,
+    //     yAxisIndex: [0],
+    //     zoomOnMouseWheel: false, // 关闭滚轮缩放
+    //     moveOnMouseWheel: true, // 开启滚轮平移
+    //     moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+    //   },
+    //   {
+    //     //纵向使用滚动条
+    //     show: zoomShow,
+    //     type: "slider",
+    //     realtime: true,
+    //     startValue: 0,
+    //     endValue: 2,
+    //     width: "8",
+    //     height: "90%",
+    //     yAxisIndex: [0], // 控制y轴滚动
+    //     fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+    //     borderColor: "rgba(17, 100, 210, 0.12)",
+    //     backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
+    //     handleSize: 0, // 两边手柄尺寸
+    //     showDataShadow: false, //是否显示数据阴影 默认auto
+    //     showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+    //     top: "1%",
+    //     right: "8", //距离右侧的距离
+    //   },
+    // ],
+    calculable: true,
+    xAxis: {
+      // name: '/次',
+      type: "value",
+      data: data.list2,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 14,
+        },
+        // formatter: `{value}/次` // 在每个x轴坐标都添加了单位
+        // formatter: function (value, index) {
+        //   if (index === data.list2.length - 1) {
+        //     // 判断是否为最后一个标签
+        //     return value + "/次"; // 添加单位
+        //   } else {
+        //     return value; // 不是最后一个标签则不添加单位
+        //   }
+        // },
+      },
+      splitLine: {
+        //分割线配置
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, 0.2)",
+          fontSize: 14,
+          width: 1,
+        },
+      },
+      axisPointer: {
+        label: {
+          autoSplitNumber: 5,
+        },
+      },
+    },
+    yAxis: {
+      type: "category", //横向显示
+      data: data.list1,
+      // max:10,
+      //y轴文字的配置
+      axisLabel: {
+        inside: false,
+        // bargap: 0.5, // 设置固定的间隔
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 14,
+        },
+      },
+      //y轴线的颜色以及宽度
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          fontSize: 14,
+          width: 1,
+          type: "solid",
+        },
+      },
+      axisTick: {
+        show: false, // 这里设置y轴刻度不显示
+      },
+      //分割线配置
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(255, 255, 255, 0.2)",
+          fontSize: 14,
+          width: 1,
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: data.list2,
+        barWidth: 15, //柱宽
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        // barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
+        barMaxWidth: 20, // 每一个都要设置
+        barMinWidth: 5, // 每一个都要设置
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(0, 183, 255, 1)",
+            borderRadius: [0, 0, 50, 0], //圆角边框
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(26, 255, 217, 0)" },
+              { offset: 1, color: "rgba(0, 183, 255, 1)" },
+            ]),
+          },
+        },
+        label: {
+          show: true,
+          position: "right",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+      },
+    ],
+  };
+};
+
+// onMounted(() => {
+//   // 基于准备好的dom，初始化echarts实例
+//   // var myChart = echarts.init(document.getElementById('main'));
+//   // Vue3中： 需要引入
+//   var myChart = echarts.init(chart.value);
+
+//   // init(); // vue3.2没有this
+//   // 使用刚指定的配置项和数据显示图表。
+//   myChart.setOption(option);
+
+//   myChart.on("scroll", function (event) {
+//     // 根据滚动位置动态计算bargap
+//     var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
+//     myChart.setOption({
+//       yAxis: {
+//         axisLabel: {
+//           bargap: bargap,
+//         },
+//       },
+//     });
+//   });
+
+//   // 单图表响应式: 跟随浏览器大小改变
+//   //   window.addEventListener("resize", () => {
+//   //     myChart.resize();
+//   //   });
+// });
+
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+  myChart.on("click", function (params) {
+    emit('village',params.name);
+  });
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    // data.max = data.list1
+    // .concat(data.list2)
+    // .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+    // console.log(data.max,data.list1, data.list2,111);
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>