From 7bc30105e205413232eff9ca4af29f6e9a5a8ce0 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 16 Apr 2024 14:08:11 +0800
Subject: [PATCH] gx

---
 src/view/echarts/ylXZZC.vue | 229 ++++++++++++++++++++++++++++++++++++
 src/view/yl.vue             |   5 +-
 2 files changed, 231 insertions(+), 3 deletions(-)
 create mode 100644 src/view/echarts/ylXZZC.vue

diff --git a/src/view/echarts/ylXZZC.vue b/src/view/echarts/ylXZZC.vue
new file mode 100644
index 0000000..5a3b672
--- /dev/null
+++ b/src/view/echarts/ylXZZC.vue
@@ -0,0 +1,229 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 46px); min-height: 150px"
+  ></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(null); // 创建DOM引用
+
+const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
+const datas = ["8", "10", "7", " 23", "25", "250"];
+
+let zoomShow = true;
+// if (data.length > 7) {
+//   zoomShow = true;
+// } else {
+//   zoomShow = false;
+// }
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  legend: {},
+  grid: {
+    top: "-2%",
+    left: "3%",
+    right: "8%",
+    bottom: "3%",
+    containLabel: true,
+    // containLabel:false,
+    color: "#ffffff",
+  },
+  // dataZoom: [
+  //   {//在内部可以纵向拖动
+  //     show: zoomShow,
+  //     type: "inside",
+  //     startValue: 0,
+  //     endValue: 2,
+  //     minValueSpan: 2,
+  //     maxValueSpan: 2,
+  //     yAxisIndex: [0],
+  //     zoomOnMouseWheel: false, // 关闭滚轮缩放
+  //     moveOnMouseWheel: true, // 开启滚轮平移
+  //     moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+  //   },
+  //   { //纵向使用滚动条
+  //     show: zoomShow,
+  //     type: "slider",
+  //     realtime: true,
+  //     startValue: 0,
+  //     endValue: 2,
+  //     width: "3.5",
+  //     height: "80%",
+  //     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: "5",//距离右侧的距离
+  //   },
+  // ],
+  dataZoom: [
+    {
+      //纵向使用滚动条
+      id: "dataZoomY",
+      type: "slider",
+      yAxisIndex: [0], // 控制y轴滚动
+      filterMode: "empty", //数据过滤,只改变数轴范围。
+      width: "10",
+      height: "100%",
+      right: "3%", //距离右侧的距离
+      orient: "vertical", //布局方式是横还是竖 'horizontal'：水平。'vertical'：竖直。
+      start: 0, //开始 数据窗口范围的,范围是：0 ~ 100
+      end: 70, //结束
+      zoomLock: true, //不能缩放
+      fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+      borderColor: "rgba(17, 100, 210, 0.12)",
+      backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
+      handleSize: 0, // 两边手柄尺寸
+      showDataShadow: false, //是否显示数据阴影 默认auto
+      showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+
+      zoomOnMouseWheel: false, // 关闭滚轮缩放
+      moveOnMouseWheel: true, // 开启滚轮平移
+      moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+    },
+  ],
+  calculable: true,
+  xAxis: {
+    // name: '/次',
+    type: "value",
+    data: datas,
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ffffff",
+      },
+      // formatter: `{value}/次` // 在每个x轴坐标都添加了单位
+      formatter: function (value, index) {
+        if (index === datas.length - 1) {
+          // 判断是否为最后一个标签
+          return value + "/次"; // 添加单位
+        } else {
+          return value; // 不是最后一个标签则不添加单位
+        }
+      },
+    },
+    splitLine: {
+      //分割线配置
+      show: true,
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.2)",
+        width: 1,
+      },
+    },
+    axisPointer: {
+      label: {
+        autoSplitNumber: 5,
+      },
+    },
+  },
+  yAxis: {
+    show:true,
+    type: "category", //横向显示
+    data: data,
+    // max:10,
+    //y轴文字的配置
+    axisLabel: {
+      inside: false,
+      // bargap: 0.5, // 设置固定的间隔
+      textStyle: {
+        color: "#ffffff",
+      },
+    },
+    axisTick: {
+      show: false, // 这里设置x轴刻度不显示
+    },
+    //y轴线的颜色以及宽度
+    axisLine: {
+      "show":true,
+      lineStyle: {
+        color: "#ffffff",
+        width: 1,
+        type: "solid",
+      },
+    },
+    // 开启滚动
+    // scrollbar: {
+    //   orient: "vertical",
+    //   // 设置滚动区域的高度
+    //   height: 100,
+    // },
+    //分割线配置
+    splitLine: {
+      // show: false,
+      show:true,
+      lineStyle: {
+        color: "#ffffff",
+        width: 1,
+      },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      name: "次数",
+      data: datas,
+      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)" },
+          ]),
+        },
+      },
+    },
+  ],
+};
+
+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();
+  //   });
+});
+</script>
+
+<style scoped></style>
diff --git a/src/view/yl.vue b/src/view/yl.vue
index c4230fa..8cf9240 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -292,11 +292,10 @@ const change = (name, index) => {
 
       .medicalServiceTop {
         position: relative;
-
         span {
           position: absolute;
-          left: 39px;
-          top: 35%;
+          left: 4.5vh;
+          top: 8vh;
           font-weight: bold;
           font-size: 32px;
           color: #ffffff;