话不多说,直接上代码
dataZoom: [
{
type: "slider",
realtime: true,
startValue: 0,
endValue: 5,
height: 4,
fillerColor: "#0D3772", // 滚动条颜色
borderColor: "#0D3772",
handleSize: 0, // 两边手柄尺寸
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: "98.5%",
moveHandleStyle: {
color: "#0d3772",
},
},
{
type: "inside", // 支持内部鼠标滚动平移
startValue: 0,
endValue: 5,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],
这段代码写在初始化的option 里面
实现的效果图如下:
可以修改滚动条背景色以及边框色