echarts时间轴属性参数

时间轴,每个图表最多仅有一个时间轴控件。

timeline的参数主要有:

名称 默认值 描述
{boolean} showtrue 显示策略,可选为:true(显示) | false(隐藏)
{string} type'time' 模式是时间类型,时间轴间隔根据时间跨度计算,可选为:'number'
{boolean} notMergefalse 时间轴上多个option切换时是否进行merge操作,同setOption第二个参数(详见实例方法
{boolean} realtimetrue 拖拽或点击改变时间轴是否实时显示
{number | string} x80 时间轴左上角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} ynull 时间轴左上角纵坐标,数值单位px,支持百分比(字符串),默认无,随y2定位,如'50%'(显示区域纵向中心)
{number | string} x280 时间轴右下角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} y20 时间轴右下角纵坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域纵向中心)
{number} width自适应 时间轴宽度,默认为总宽度 - x - x2,数值单位px,指定width后将忽略x2。见下图。 
支持百分比(字符串),如'50%'(显示区域一半的宽度)
{number} height50 时间轴高度,数值单位px,支持百分比(字符串),如'50%'(显示区域一半的高度)
{color}backgroundColor'rgba(0,0,0,0)' 背景颜色,默认透明。
{number} borderWidth0 边框线宽
{color} borderColor'#ccc' 边框颜色。
{number | Array}padding5 内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{string} controlPosition'left' 播放控制器位置,可选为:'left' | 'right' | 'none'
{boolean} autoPlayfalse 是否自动播放
{boolean} looptrue 是否循环播放
{number} playInterval2000 播放时间间隔,单位ms
{Object} lineStyle{color: '#666', width: 1, type: 'dashed'} 时间轴轴线样式,lineStyle控制线条样式,(详见lineStyle
{Object} label
{
    show: true,
    interval: 'auto',
    rotate: 0,
    formatter: null,
    textStyle: {
        color: '#333'
    }
}
时间轴标签文本

show : 是否显示 
interval : 挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number} 
rotate : 旋转角度,默认为0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90 
formatter : 间隔名称格式器:{string}(Template) | {Function} 
textStyle : 文字样式(详见textStyle
{Object}checkpointStyle
{
    symbol : 'auto',
    symbolSize : 'auto',
    color : 'auto',
    borderColor : 'auto',
    borderWidth : 'auto',
    label: {
        show: false,
        textStyle: {
            color: 'auto'
        }
    }
}
时间轴当前点

symbol : 当前点symbol,默认随轴上的symbol 
symbolSize : 当前点symbol大小,默认随轴上symbol大小 
color : 当前点symbol颜色,默认为随当前点颜色,可指定具体颜色,如无则为'#1e90ff' 
borderColor : 当前点symbol边线颜色 
borderWidth : 当前点symbol边线宽度 
label同上
{Object} controlStyle
{
    normal : { color : '#333'},
    emphasis : { color : '#1e90ff'}
}
时间轴控制器样式,可指定正常和高亮颜色
{string} symbol'emptyDiamond' 轴点symbol,同serie.symbol
{number} symbolSize4 轴点symbol,同serie.symbolSize
{number} currentIndex0 当前索引位置,对应options数组,用于指定显示特定系列
{Array} data[] 时间轴列表,同时也是轴label内容

IT分享

  • 12
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌c

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值