在echarts的option{}中添加如下内容即可:
dataZoom: [
{
type: 'slider',
realtime: true,
start: 0,
end: 5, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
height: 5, //组件高度
left: 5, //左边的距离
right: 5, //右边的距离
bottom: 10, //下边的距离
show: true, // 是否展示
fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
handleSize: 0, //两边手柄尺寸
showDetail: false, //拖拽时是否展示滚动条两侧的文字
zoomLock: true, //是否只平移不缩放
moveOnMouseMove: false //鼠标移动能触发数据窗口平移
//zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
},
{
type: "inside", // 支持内部鼠标滚动平移
start: 0,
end: 5,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
}
]