炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 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类似,这里不展开

炫意HTML5 » ECharts – dataZoom-slider概述及其主要属性

Java基础教程Android基础教程