PS:以下代码示例的配置中,包含了X轴和Y轴(默认只有2个轴,>2个轴的需要自行修改配置)
{
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
dataZoom: [
{
// zoomOnMouse
bottom: 3,
id: 'dataZoomY',
// yAxisIndex: [0],
show: true, // 是否显示滑动条,不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 7, // 一次性展示5个 7 - 5 9 - 6
// start: 0,
// end: 10,
// width: 6,
height: 4,
borderColor: 'transparent',
fillerColor: '#E8EAEF',
zoomLock: true,
showDataShadow: false, // 是否显示数据阴影 默认auto
backgroundColor: '#fff',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
realtime: true, // 是否实时更新
filterMode: 'filter',
handleIcon: 'circle',
handleStyle: {
color: '#E8EAEF',
borderColor: '#E8EAEF',
},
// handleSize: '80%',
moveHandleSize: 0,
// maxValueSpan: 2,
// minValueSpan: 2,
brushSelect: false, // 刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
},
{
type: 'inside',
yAxisIndex: 0,
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
{
// zoomOnMouse
bottom: 3,
id: 'dataZoomX',
// yAxisIndex: [0],
show: true, // 是否显示滑动条,不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 7, // 一次性展示5个 7 - 5 9 - 6
// start: 0,
// end: 10,
// width: 6,
height: 4,
borderColor: 'transparent',
fillerColor: '#E8EAEF',
zoomLock: true,
showDataShadow: false, // 是否显示数据阴影 默认auto
backgroundColor: '#fff',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
realtime: true, // 是否实时更新
filterMode: 'filter',
handleIcon: 'circle',
handleStyle: {
color: '#E8EAEF',
borderColor: '#E8EAEF',
},
// handleSize: '80%',
moveHandleSize: 0,
// maxValueSpan: 2,
// minValueSpan: 2,
brushSelect: false, // 刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
},
{
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
]