echarts柱形图支持横向/纵向滚动条，鼠标滚动可以平移滚动条

2024-07-11 22:47| 来源: 网络整理| 查看: 265

实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移

image.png

echarts文档里，图形的滚动条分两种

内置型（效果是：鼠标在图中点击拖动平移，在图中滚动缩放）滚动条型（效果是：鼠标拖动滚动条平移，鼠标拖大缩小滚动条缩放）

而我们要实现的就是综合了这两种。。既要内置型的能在图中滚动，又要滚动条的样式

实现代码

const zoomData=[ // 有滚动条平移 { type: 'slider', realtime: true, start: 0, end: 40, // 初始展示40% height: 4, fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色 borderColor: "rgba(17, 100, 210, 0.12)", handleSize:0, // 两边手柄尺寸 showDetail: false, // 拖拽时是否展示滚动条两侧的文字 top:'96%', // zoomLock:true, // 是否只平移不缩放 // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移 // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放 }, { type: "inside", // 支持内部鼠标滚动平移 start: 0, end: 40, zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 } ]

moveOnMouseWheel和moveOnMouseMove 记得开启，开启后滚轮往下滚数据往后移动

zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动

再添加到option里即可 dataZoom: zoomData,

例子2

dataZoom: [ { // 滚动条以及缩放 type: "inside", // start: 0, // end: endZoom, // 这里end跟数据有关系数据越多，end越小 end是百分比例 startValue: 0, // 从头开始。 endValue: 6, // 最多六个 minValueSpan: 6, // 放大到最少几个 maxValueSpan: 365, // 缩小到最多几个 }, ],

这里的startValue和endValue代表初始只显示七个，七组柱子 minValueSpan代表放大到最少到显示几个 maxValueSpan代表缩小到最多显示几个

例子3：

垂直方向滚动条垂直方向滚动条

dataZoom=[ { type: "inside", startValue: 0, endValue: 2, minValueSpan: 2, maxValueSpan: 2, yAxisIndex: [0], zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 }, { 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', } ]

【本文地址】

公司简介

联系我们