echarts时间轴属性参数

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

timeline的参数主要有:

名称 默认值 描述
{boolean} show true 显示策略,可选为:true(显示) | false(隐藏)
{string} type 'time' 模式是时间类型,时间轴间隔根据时间跨度计算,可选为:'number'
{boolean} notMerge false 时间轴上多个option切换时是否进行merge操作,同setOption第二个参数(详见实例方法
{boolean} realtime true 拖拽或点击改变时间轴是否实时显示
{number | string} x 80 时间轴左上角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} y null 时间轴左上角纵坐标,数值单位px,支持百分比(字符串),默认无,随y2定位,如'50%'(显示区域纵向中心)
{number | string} x2 80 时间轴右下角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} y2 0 时间轴右下角纵坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域纵向中心)
{number} width 自适应 时间轴宽度,默认为总宽度 - x - x2,数值单位px,指定width后将忽略x2。见下图。 
支持百分比(字符串),如'50%'(显示区域一半的宽度)
{number} height 50 时间轴高度,数值单位px,支持百分比(字符串),如'50%'(显示区域一半的高度)
{color}backgroundColor 'rgba(0,0,0,0)' 背景颜色,默认透明。
{number} borderWidth 0 边框线宽
{color} borderColor '#ccc' 边框颜色。
{number | Array}padding 5 内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{string} controlPosition 'left' 播放控制器位置,可选为:'left' | 'right' | 'none'
{boolean} autoPlay false 是否自动播放
{boolean} loop true 是否循环播放
{number} playInterval 2000 播放时间间隔,单位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} symbolSize 4 轴点symbol,同serie.symbolSize
{number} currentIndex 0 当前索引位置,对应options数组,用于指定显示特定系列
{Array} data [] 时间轴列表,同时也是轴label内容

IT分享

猜你喜欢

转载自blog.csdn.net/chenxiaoscode/article/details/52460275