1、横向缩放
[{
"type": 'slider',
"realtime": true,
"start": 0,
"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
"height": 10, //组件高度
"left": 0, //左边的距离
"right": 5, //右边的距离
"bottom": 30, //下边的距离
"show": true, // 是否展示
"fillerColor": "#D8DEEE", // 滚动条颜色
"borderColor": "#D8DEEE",
"zoomLock": true,
"fillerMode": 'filler',
"showDetail": false,
"brushSelect": false,
"dataBackground": {
"areaStyle": {
"color": '#F2F7FF'
}
}
},
{
"type": "inside", // 支持内部鼠标滚动平移
"start": 0,
"show": true,
"zoomLock": true,//开启 就是禁止滚轮缩放
"end": 100 - 1500,
"xAxisIndex": [0]//数据差距大不显示的解决
}
]
2.纵向缩放
[{
"type": 'slider',
"realtime": true,
"start": 0,
"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
// "height": 5, //组件高度
"width": 10,
"left": 3, //左边的距离
"show": true, // 是否展示
"fillerColor": "rgba(17, 100, 210, 0.42)", // 滚动条颜色
"borderColor": "rgba(17, 100, 210, 0.12)",
"showDetail": false, //拖拽时是否展示滚动条两侧的文字
"zoomLock": true, //是否只平移不缩放
"moveOnMouseMove": false, //鼠标移动能触发数据窗口平移
"zoomOnMouseWheel": false, //鼠标移动能触发数据窗口缩放
"yAxisIndex": [0],
"dataZoom-slider": {
"orient": 'vertical'
},
"show": true, // 是否展示
"fillerColor": "#D8DEEE", // 滚动条颜色
"borderColor": "#D8DEEE",
// "zoomLock": true,
"fillerMode": 'filler',
"brushSelect": false,
"dataBackground": {
"areaStyle": {
"color": '#F2F7FF'
}
}
},
{
"type": "inside", // 支持内部鼠标滚动平移
"start": 0,
"end": 50,
"zoomLock": true,
// "zoomOnMouseWheel": false, // 关闭滚轮缩放
// "moveOnMouseWheel": true, // 开启滚轮平移
// "moveOnMouseMove": true, // 鼠标移动能触发数据窗口平移
"yAxisIndex": [0],//纵向数据差异过大不显示解决
}
]
总结:设置"yAxisIndex": [0]或者"xAxisIndex": [0]