echarts 滚动条

原创已于 2022-11-25 09:08:40 修改 · 902 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-11-24 18:02:58 首次发布

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

X轴

图片仅作例子展示
在这里插入图片描述

        dataZoom: [
          {
            start: 0, // 默认为0
            end: 100, // 默认为100
            type: 'slider',
            maxValueSpan: 2, // 显示数据的条数(默认显示10个，注意：从 0 开始计算)
            show: this.XData.length > 3, //是否显示滚动条(this.XData换成自己的数据)
            xAxisIndex: [0],
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            height: 0,
            bottom: 10,
            borderColor: 'transparent',
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            filterMode: 'filter',
            // 	brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
            moveHandleStyle: {
              color: 'rgba(0,0,0,0.2)',
              shadowColor: 'rgba(0,0,0,0)',
              borderCap: 'round'
            },
          },
        ],

Y轴

图片仅作例子展示
在这里插入图片描述

dataZoom: [
        {
          type: 'slider',
          yAxisIndex: [0],
          left: 0,    
          // top: 60,
          // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
          // 也可以用 startValue设置起始值
          start: 1,
          end: 100,
          width: 6,
          maxValueSpan: 6, // 显示数据的条数(默认显示10个，注意：从 0 开始计算)
          show: this.departmentsList.length > 7, // 是否显示Y轴滚动条(this.departmentsList换成自己的数据)
          // 组件的背景颜色
          left: 650, //左边的距离
          borderRadius: 50, //滚动条圆角
          borderColor: "E1E1E1",//滚动条边框颜色
          fillerColor: "#E1E1E1", // 滚动条颜色
          backgroundColor: '#fff',//两边未选中的滑动条区域的颜色
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 控制手柄的尺寸
          // handleSize: 10,
          // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
          showDataShadow: false,
          brushSelect: false, // 滚动条刷选功能
        },
        {
          type: 'inside',
          yAxisIndex: [0],
          start: 1,
          // end: 36,
          // 不按任何功能键，鼠标滚轮能触发缩放
          zoomOnMouseWheel: false,
          // 不按任何功能键，鼠标移动能触发数据窗口平移
          moveOnMouseWheel: true
        }
      ]

以上可根据自己的需求进行对应的修改即可！！！