echarts dataZoom y轴滚动条

最新推荐文章于 2024-05-06 11:24:34 发布

野生橙序猿

最新推荐文章于 2024-05-06 11:24:34 发布

阅读量1.9k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_59290344/article/details/127884394

版权

dataZoom: [
          {
            type: 'slider',
            maxValueSpan: 5, // 显示数据的条数(默认显示10个)
            show: true,
            zoomLock: false,
            startvalue: 0,
            width: 10,
            yAxisIndex: [0],
            // height: '10',
            left: '97%', // 滑动条位置
            start: 100, // 默认为0
            end: 70, // 默认为100
            orient: 'vertical',
            filterMode: 'empty',
            fillerColor: 'rgba(27,90,169,1)',
            borderColor: 'transparent',
            // handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
            handleSize: '100%',
            handleStyle: {
              color: 'rgba(27,90,169,1)',
              borderWidth: 0,
            },
            backgroundColor: 'rgba(37, 46, 100, 0.8)', // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            // filterMode: 'filter',
            brushSelect: false,
          },
          {
            type: 'inside', // 内置滑动，随鼠标滚轮展示
            yAxisIndex: [0],
            start: 1, // 初始化时，滑动条宽度开始标度
            end: 100, // 初始化时，滑动条宽度结束标度
            zoomOnMouseWheel: false, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
            moveOnMouseMove: true,
            moveOnMouseWheel: true, // 鼠标滚轮实现移动
          },
        ],