gx

src/view/echarts/ylXZZC.vue

@@ -13,7 +13,7 @@ import * as echarts from "echarts";
 const chart = ref(null); // 创建DOM引用
 
 const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
-const datas = ["2", "4", "7", " 23", "25", "250"];
+const datas = ["8", "10", "7", " 23", "25", "250"];
 
 let zoomShow = true;
 // if (data.length > 7) {
@@ -38,37 +38,56 @@ let option = {
     containLabel: true,
     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: [
-    {
+    {//纵向使用滚动条
-      show: zoomShow,
+      id: "dataZoomY",
-      type: "inside",
+      type: "slider",
-      startValue: 0,
+      yAxisIndex: [0],// 控制y轴滚动
-      endValue: 2,
+      filterMode: "empty",//数据过滤,只改变数轴范围。
-      minValueSpan: 2,
+      width: "10",
-      maxValueSpan: 2,
+      height: "100%",
-      yAxisIndex: [0],
+      right: "3%",//距离右侧的距离
+      orient: "vertical" ,//布局方式是横还是竖 'horizontal'：水平。'vertical'：竖直。
+      // zoomLock: true, //不能缩放
+      start: 0,//开始 数据窗口范围的,范围是：0 ~ 100
+      end: 70,//结束
+      handleSize: 8,
       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",
-    },
   ],
   calculable: true,
   xAxis: {
@@ -98,6 +117,11 @@ let option = {
         width: 1,
       },
     },
+    axisPointer: {
+      label: {
+        autoSplitNumber: 5,
+      },
+    },
   },
   yAxis: {
     type: "category", //横向显示
@@ -106,7 +130,7 @@ let option = {
     //y轴文字的配置
     axisLabel: {
       inside: false,
-      bargap: 0.5, // 设置固定的间隔
+      // bargap: 0.5, // 设置固定的间隔
       textStyle: {
         color: "#ffffff",
       },
@@ -121,11 +145,11 @@ let option = {
       },
     },
     // 开启滚动
-    scrollbar: {
+    // scrollbar: {
-      orient: "vertical",
+    //   orient: "vertical",
-      // 设置滚动区域的高度
+    //   // 设置滚动区域的高度
-      height: 100,
+    //   height: 100,
-    },
+    // },
     //分割线配置
     splitLine: {
       show: false,

src/view/yl.vue

@@ -31,7 +31,7 @@
         <ePie v-if="leftchoose.first == '1'"></ePie>
         <ePie2 v-else></ePie2>
       </div>
-      <div class="flex1" style="margin-top:10px;">
+      <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_2">
           <span class="text">
             <img
@@ -61,7 +61,7 @@
         <eP2 v-if="leftchoose.second == '1'"></eP2>
         <eP2_2 v-else />
       </div>
-      <div class="flex1" style="margin-top:10px;">
+      <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3">
           <span class="text">
             <img
@@ -106,10 +106,7 @@
       </div>
       <div class="flex1">
         <div class="yd_title familyPlanning"></div>
-        <!-- 计划生育 -->
-        <!-- <div style="width: 100%; "> -->
         <ylJHSY></ylJHSY>
-        <!-- </div> -->
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -474,9 +471,10 @@ const change = (name, index) => {
 }
 
 .history {
-  padding-top: 12px;
+  height: calc(100% - 36px);
   display: flex;
   justify-content: space-around;
+  align-items: center;
   .history1 {
     font-size: 26px;
     color: #ffffff;