gx

src/view/echarts/ylXZZC.vue

@@ -36,38 +36,38 @@ let option = {
     containLabel: true,
     color: "#ffffff",
   },
-  // dataZoom: [
+  dataZoom: [
-  //   {
+    {
-  //     show: zoomShow,
+      show: zoomShow,
-  //     type: "inside",
+      type: "inside",
-  //     startValue: 0,
+      startValue: 0,
-  //     endValue: 2,
+      endValue: 2,
-  //     minValueSpan: 2,
+      minValueSpan: 2,
-  //     maxValueSpan: 2,
+      maxValueSpan: 2,
-  //     yAxisIndex: [0],
+      yAxisIndex: [0],
-  //     zoomOnMouseWheel: false, // 关闭滚轮缩放
+      zoomOnMouseWheel: false, // 关闭滚轮缩放
-  //     moveOnMouseWheel: true, // 开启滚轮平移
+      moveOnMouseWheel: true, // 开启滚轮平移
-  //     moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+      moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
-  //   },
+    },
-  //   {
+    {
-  //     show: zoomShow,
+      show: zoomShow,
-  //     type: "slider",
+      type: "slider",
-  //     realtime: true,
+      realtime: true,
-  //     startValue: 0,
+      startValue: 0,
-  //     endValue: 2,
+      endValue: 2,
-  //     width: "3.5",
+      width: "3.5",
-  //     height: "80%",
+      height: "80%",
-  //     yAxisIndex: [0], // 控制y轴滚动
+      yAxisIndex: [0], // 控制y轴滚动
-  //     fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+      fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
-  //     borderColor: "rgba(17, 100, 210, 0.12)",
+      borderColor: "rgba(17, 100, 210, 0.12)",
-  //     backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
+      backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
-  //     handleSize: 0, // 两边手柄尺寸
+      handleSize: 0, // 两边手柄尺寸
-  //     showDataShadow: false, //是否显示数据阴影 默认auto
+      showDataShadow: false, //是否显示数据阴影 默认auto
-  //     showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+      showDetail: false, // 拖拽时是否展示滚动条两侧的文字
-  //     top: "1%",
+      top: "1%",
-  //     right: "5",
+      right: "5",
-  //   },
+    },
-  // ],
+  ],
   calculable: true,
   color: "rgba(0, 252, 255, 1)",
   // label: {
@@ -83,6 +83,7 @@ let option = {
   //             }
   //           },
   xAxis: {
+    type: "value",
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
@@ -99,19 +100,13 @@ let option = {
     },
   },
   yAxis: {
-    type: "category",
+    type: "category", //横向显示
     data: data,
-    // max:10,
-    splitLine: {
-      //分割线配置
-      show: false,
-      lineStyle: {
-        color: "#ffffff",
-        width: 1,
-      },
-    },
     axisLabel: {
       //y轴文字的配置
+      inside: false,
+      // 设置固定的间隔
+      bargap: 0.5,
       textStyle: {
         color: "#ffffff",
       },
@@ -125,6 +120,22 @@ let option = {
         type: "solid",
       },
     },
+    // 开启滚动
+    scrollbar: {
+      orient: "vertical",
+      // 设置滚动区域的高度
+      height: 100,
+    },
+
+    // max:10,
+    splitLine: {
+      //分割线配置
+      show: false,
+      lineStyle: {
+        color: "#ffffff",
+        width: 1,
+      },
+    },
   },
   series: [
     {
@@ -134,29 +145,15 @@ let option = {
       barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
       // barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
       itemStyle: {
-        // barBorderRadius: [0, 20, 20, 0],
+        // emphasis: {
-        //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里
+        //     barBorderRadius: 7
-        //         {
-        //           offset: 0,
-        //           color: '#FFF1AD'
         // },
-        //         {
-        //           offset: 1,
-        //           color: '#FC5090'
-        //         }
-        //       ]),
         normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
-            },
-            {
-              offset: 0.98,
-              color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
-            },
-          ]), //背景渐变
           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)" },
+          ]),
         },
       },
     },
@@ -174,6 +171,18 @@ onMounted(() => {
   // 使用刚指定的配置项和数据显示图表。
   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();