https://echarts.apache.org/zh/option.html#dataZoom
Echarts dataZoom x轴横坐标缩放
把 dataZoom 房子 option下的第一级, 和 xAxis , yAxis , series 等 同级;
dateZoom 可以是一个Object, 也可以是Object数组
dataZoom的type 有两种值
-
"slider" 游标, 为默认值, 图表外部会出现缩放条 , 因为"slider"是默认值,所以 type: 'slider'存在和去掉,效果是一样的
-
"inside" 内部, 外部看不到变化, 通过鼠标滚轮可以缩放图表
dataZoom: [
{
textStyle: {
color: '#8392A5'
},
handleIcon: //绘制游标的样式
'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
brushSelect: true
},
{
type: 'inside'
}
],
{
type: 'slider',
id : 'sliderX',
show: true,//是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在
backgroundColor: 'rgba(47,69,84,0)',//组件的背景颜色
dataBackground: {//数据阴影的样式。
lineStyle: {...},//阴影的线条样式
areaStyle: {...},//阴影的填充样式
},
selectedDataBackground: {//选中部分数据阴影的样式
lineStyle: {...},//选中部分阴影的线条样式
areaStyle: {...},//选中部分阴影的填充样式
},
fillerColor: 'rgba(167,183,204,0.4)',//选中范围的填充颜色
borderColor: '#ddd',//边框颜色。
handleIcon:'',//两侧缩放手柄的 icon 形状，支持路径字符串
handleSize: '100%',//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟dataZoom宽度相同
handleStyle: {...},//两侧缩放手柄的样式配置
moveHandleIcon : '',//移动手柄中间的icon，支持路径字符串
moveHandleSize: 7,//移动手柄的尺寸高度
moveHandleStyle: {...},//移动手柄的样式配置
labelPrecision: 'auto',//显示label的小数精度。默认根据数据自动决定
labelFormatter : '',//显示的label的格式化器
showDetail: true,//是否显示detail，即拖拽时候显示详细数值信息
showDataShadow: 'auto',//是否在 dataZoom-silder组件中显示数据阴影。数据阴影可以简单地反应数据走势
realtime: true,//拖动时，是否实时更新系列的视图。如果设置为false，则只在拖拽结束的时候更新。
textStyle: {...},//dataZoom文本样式
xAxisIndex: 0,
yAxisIndex: [0, 2],
radiusAxisIndex: 0,
angleAxisIndex: [0, 2],
filterMode: 'filter',
start: 0,
end: 100,
startValue ...,
endValue ...,
minSpan ...,
maxSpan ...,
minValueSpan ...,
maxValueSpan ...,
orient ...,
zoomLock: false,
throttle: 100,
rangeMode ...,
zlevel: 0,//所有图形的zlevel值。zlevel大的Canvas会放在zlevel小的Canvas的上面
z: 2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
left: 'auto',//dataZoom-slider组件离容器左侧的距离
top: 'auto',//dataZoom-slider组件离容器上侧的距离
right: 'auto',//dataZoom-slider组件离容器右侧的距离
bottom: 'auto',//dataZoom-slider组件离容器下侧的距离
brushSelect: true,//是否开启刷选功能。在下图的brush区域你可以按住鼠标左键后框选出选中部分
brushStyle: {...},//刷选框样式设置
emphasis: {//高亮样式设置
handleStyle: {...},
moveHandleStyle: {...}
}
}
Echarts dataZoom xy双轴横坐标缩放
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
