codecamp

ECharts当前项的图形样式

timeline.checkpointStyle   |   Object

当前项(checkpoint)的图形样式。

timeline.checkpointStyle.symbol   |   string

[ default: 'circle' ]

timeline.checkpointStyle 标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

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

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

timeline.checkpointStyle.symbolSize   |   number, Array

[ default: 13 ]

timeline.checkpointStyle 标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。

timeline.checkpointStyle.symbolRotate   |   number

timeline.checkpointStyle 标记的旋转角度。

注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

timeline.checkpointStyle.symbolOffset   |   Array

[ default: [0, 0] ]

timeline.checkpointStyle 标记相对于原本位置的偏移。

默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

timeline.checkpointStyle.color   |   Color

[ default: '#c23531' ]

时间轴组件中当前项(checkpoint)的颜色。

timeline.checkpointStyle.borderWidth   |   number

[ default: 5 ]

时间轴组件中当前项(checkpoint)的边框宽度。

timeline.checkpointStyle.borderColor   |    Color

[ default: 'rgba(194,53,49, 0.5)' ]

时间轴组件中当前项(checkpoint)的边框颜色。

timeline.checkpointStyle.animation   |   boolean

[ default: true ]

时间轴组件中当前项(checkpoint)在 timeline 播放切换中的移动,是否有动画。

timeline.checkpointStyle.animationDuration   |   number

[ default: 300 ]

时间轴组件中当前项(checkpoint)的动画时长。

timeline.checkpointStyle.animationEasing   |   string

[ default: 'quinticInOut' ]

时间轴组件中当前项(checkpoint)的动画的缓动效果。不同的缓动效果可以参考 缓动示例


ECharts时间轴图形样式设置
ECharts控制按钮在不同状态下的样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }