{{ target: component-data-zoom-slider }}

dataZoom.slider(Object)

滑动条型数据区域缩放组件（dataZoomInside）

滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能。下图显示了该组件可交互部分

600xauto

const option = { color: [‘#3398DB’], tooltip: { trigger: ‘axis’ }, xAxis: { data: data.map(function (item) { return item[0]; }) }, yAxis: { splitLine: { show: false } }, dataZoom: [{ }], series: { name: ‘Beijing AQI’, type: ‘bar’, data: data.map(function (item) { return item[1]; }) } };

type(string) = ‘slider’

{{ use: partial-component-id( prefix = “#” ) }}

show(boolean) = true

是否显示 ${dataZoomName} 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。

backgroundColor(Color) = ‘rgba(47,69,84,0)’

组件的背景颜色。

dataBackground(Object)

数据阴影的样式。

lineStyle(Object)

阴影的线条样式

{{ use: partial-line-style( prefix = “###”, defaultWidth = 0.5, defaultColor = ‘#d2dbee’ ) }}

areaStyle(Object)

阴影的填充样式

{{ use: partial-area-style( prefix = “###”, defaultOpacity = 0.2, defaultColor = ‘d2dbee’ ) }}

selectedDataBackground(Object)

{{ use: partial-version( version = “5.0.0” ) }}

选中部分数据阴影的样式。

lineStyle(Object)

选中部分阴影的线条样式

{{ use: partial-line-style( prefix = “###”, defaultWidth = 0.5, defaultColor = ‘#8fb0f7’ ) }}

areaStyle(Object)

选中部分阴影的填充样式

{{ use: partial-area-style( prefix = “###”, defaultOpacity = 0.2, defaultColor = ‘#8fb0f7’ ) }}

fillerColor(Color) = ‘rgba(167,183,204,0.4)’

选中范围的填充颜色。

borderColor(Color) = ‘#ddd’

边框颜色。

handleIcon(string)

两侧缩放手柄的 icon 形状，支持路径字符串，默认为：

'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z'

{{ use: partial-icon-image-path() }}

handleSize(number|string) = ‘100%’

控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。

handleStyle(Object)

两侧缩放手柄的样式配置。

{{ use: partial-item-style( prefix = “##”, defaultColor = “#fff”, defaultBorderColor = “#ACB8D1” ) }}

moveHandleIcon(string)

{{ use: partial-version( version = “5.0.0” ) }}

移动手柄中间的 icon，支持路径字符串，默认为：

'M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z'

{{ use: partial-icon-image-path() }}

moveHandleSize(number) = 7

{{ use: partial-version( version = “5.0.0” ) }}

移动手柄的尺寸高度。

moveHandleStyle(Object)

{{ use: partial-version( version = “5.0.0” ) }}

移动手柄的样式配置。

{{ use: partial-item-style( prefix = “##”, defaultColor = “#D2DBEE” ) }}

labelPrecision(number|string) = ‘auto’

显示label的小数精度。默认根据数据自动决定。

labelFormatter(string|Function) = null

显示的label的格式化器。

  • 如果为 string，表示模板，例如：aaaa{value}bbbb，其中{value}会被替换为实际的数值。

  • 如果为 Function，表示回调函数，例如：

/**
 * @param {*} value 如果 axis.type 为 'category'，则 `value` 为 axis.data 的 index。
 *                  否则 `value` 是当前值。
 * @param {strign} valueStr 内部格式化的结果。
 * @return {string} 返回最终的label内容。
 */
labelFormatter: function (value) {
    return 'aaa' + value + 'bbb';
}

showDetail(boolean) = true

是否显示detail，即拖拽时候显示详细数值信息。

showDataShadow(string) = ‘auto’

是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。

realtime(boolean) = true

拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。

textStyle(Object)

{{ use: partial-simple-text-style( prefix = ‘##’, name = 'dataZoom ', defaultColor = ‘#333’ ) }}

{{ use: partial-data-zoom-common( dataZoomName = ‘dataZoom-slider’ ) }}

{{ use: partial-rect-layout( componentName = ‘dataZoom-slider’ ) }}

brushSelect(boolean) = true

{{ use: partial-version( version = “5.0.0” ) }}

是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。

600xauto

brushStyle(Object)

{{ use: partial-version( version = “5.0.0” ) }}

刷选框样式设置。

{{ use: partial-item-style( prefix = “##”, defaultColor = “rgba(135,175,274,0.15)” ) }}

emphasis(Object)

{{ use: partial-version( version = “5.0.0” ) }}

高亮样式设置。

handleStyle(Object)

{{ use: partial-item-style( prefix = “###” ) }}

moveHandleStyle(Object)

{{ use: partial-item-style( prefix = “###” ) }}