ECharts 入门教程 ECharts控制按钮的样式

2024-02-25 开发教程 ECharts 入门教程 匿名 15

timeline.controlStyle | Object

设置 ECharts 时间轴组件中控制按钮的样式。

控制按钮包括:播放按钮、前进按钮、后退按钮。

timeline.controlStyle.show | boolean

[ default: true ]

是否显示时间轴组件的控制按钮。设置为 false,则表示所有类型的控制按钮都不显示。

timeline.controlStyle.showPlayBtn | boolean

[ default: true ]

是否显示播放按钮。

timeline.controlStyle.showPrevBtn | boolean

[ default: true ]

是否显示后退按钮。

timeline.controlStyle.showNextBtn | boolean

[ default: true ]

是否显示前进按钮。

timeline.controlStyle.itemSize | number

[ default: 22 ]

设置时间轴组件控制按钮的尺寸,单位为像素(px)。

timeline.controlStyle.itemGap | number

[ default: 12 ]

设置时间轴组件控制按钮之间的间隔,单位为像素(px)。

timeline.controlStyle.position | string

[ default: 'left' ]

设置时间轴组件控制按钮的位置。

  • 当 timeline.orient 为 'horizontal'时,'left'、'right'有效。
  • 当 timeline.orient 为 'vertical'时,'top'、'bottom'有效。

timeline.controlStyle.playIcon | string

播放按钮的可播放状态的图形。

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.stopIcon | string

播放按钮的可停止状态的图形。

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.prevIcon | string

后退按钮的图形

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.nextIcon | string

前进按钮的图形

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。