dataZoom-slider概述及其主要属性
滑动条型数据区域缩放组件（dataZoomSlider）
（参考数据区域缩放组件（dataZoom）的介绍）
所有属性
dataZoom-slider. type = ‘slider’
设置dataZoom的类型。
dataZoom-slider. id
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
dataZoom-slider. show = true
是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
dataZoom-slider. backgroundColor = ‘rgba(47,69,84,0)’
组件的背景颜色。
dataZoom-slider. dataBackgroundObject
数据阴影的样式。
. lineStyleObject
阴影的线条样式
所有属性
{color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity}
. areaStyleObject
阴影的填充样式
所有属性
{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
dataZoom-slider. fillerColor = ‘rgba(167,183,204,0.4)’
选中范围的填充颜色。
dataZoom-slider. borderColor = ‘#ddd’
边框颜色。
dataZoom-slider. handleIcon
手柄的 icon 形状，支持路径字符串，默认为：
'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'
可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。
URL 为图片链接例如：
'image:///a/'
URL 为 dataURI 例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
dataZoom-slider. handleSize = ‘100%’
控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
dataZoom-slider. handleStyleObject
手柄的样式配置，见 示例 area-simple
. color = #a7b7cc
图形的颜色。
颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’。除了纯色之外颜色也支持渐变色和纹理填充
dataZoom-slider. labelFormatterstringFunction
显示的label的格式化器。
如果为 string，表示模板，例如：aaaa{value}bbbb，其中{value}会被替换为实际的数值。
如果为 Function，表示回调函数，例如：
/**
* @param {*} value 如果 为 'category'，则 `value` 为 的 index。
* 否则 `value` 是当前值。
* @param {strign} valueStr 内部格式化的结果。
* @return {string} 返回最终的label内容。
*/
labelFormatter: function (value) {
return 'aaa' + value + 'bbb';
}
dataZoom-slider. textStyleany
. color = #333
dataZoom 文字的颜色。
. fontStyle = ‘normal’
dataZoom 文字字体的风格。
可选：
‘normal’
‘italic’
‘oblique’
. fontWeight = normal
dataZoom 文字字体的粗细。
可选：
‘normal’
‘bold’
‘bolder’
‘lighter’
100 | 200 | 300 | 400…
. fontFamily = ‘sans-serif’
dataZoom 文字的字体系列。
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
. fontSize = 12
dataZoom 文字的字体大小。
. lineHeight
行高。
rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`，则 `lineHeight` 为 56
}
}
}
dataZoom-slider. xAxisIndexnumberArray
设置 dataZoom-slider 组件控制的 x轴（即xAxis，是直角坐标系中的概念）。
不指定时，当 为 ‘horizontal’时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
dataZoom-slider. yAxisIndexnumberArray
设置 dataZoom-slider 组件控制的 y轴（即yAxis，是直角坐标系中的概念）。
不指定时，当 为 ‘vertical’时，默认控制和 dataZoom 平行的第一个 yAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
dataZoom-slider. filterMode = ‘filter’
数据过滤模式
与dataZoom-inside。filterMode类似，这里不展开