dataZoom-slider概述及其主要属性

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

• 数据阴影的样式。

dataZoom-slider.dataBackground. lineStyleObject

• 阴影的线条样式
• 所有属性
  • {color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity}

dataZoom-slider.dataBackground. 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://http://xxx.xxx.xxx/a/b.png'

• URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

• 可以通过 ‘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

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

dataZoom-slider. textStyleany

dataZoom-slider.textStyle. color = #333

• dataZoom 文字的颜色。

dataZoom-slider.textStyle. fontStyle = ‘normal’

• dataZoom 文字字体的风格。
• 可选：
  • ‘normal’
  • ‘italic’
  • ‘oblique’

dataZoom-slider.textStyle. fontWeight = normal

• dataZoom 文字字体的粗细。
• 可选：
  • ‘normal’
  • ‘bold’
  • ‘bolder’
  • ‘lighter’
  • 100 | 200 | 300 | 400…

dataZoom-slider.textStyle. fontFamily = ‘sans-serif’

• dataZoom 文字的字体系列。
• 还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

dataZoom-slider.textStyle. fontSize = 12

• dataZoom 文字的字体大小。

dataZoom-slider.textStyle. lineHeight

• 行高。
• rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

dataZoom-slider. xAxisIndexnumberArray

• 设置 dataZoom-slider 组件控制的 x轴（即xAxis，是直角坐标系中的概念）。
• 不指定时，当 dataZoom-slider.orient 为 ‘horizontal’时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
• 如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。

dataZoom-slider. yAxisIndexnumberArray

• 设置 dataZoom-slider 组件控制的 y轴（即yAxis，是直角坐标系中的概念）。
• 不指定时，当 dataZoom-slider.orient 为 ‘vertical’时，默认控制和 dataZoom 平行的第一个 yAxis。但是不建议使用默认值，建议显式指定。
• 如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。

dataZoom-slider. filterMode = ‘filter’

• 数据过滤模式
• 与dataZoom-inside。filterMode类似，这里不展开