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
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Echarts时间轴Echarts中的一个组件,用于展示和控制数据随时间的变化。在Vue项目中,可以通过引入Echarts的图表实例来使用时间轴功能。首先,在main.js中引入Echarts的库,并将其挂载到Vue的原型上,以便在整个项目中可以方便地调用。接下来,在需要使用时间轴的组件中,可以通过在初始化Echarts画板时添加时间轴配置来实现。具体可以参考以下步骤: 1. 在Vue组件中引入Echarts的图表实例。 2. 在data函数中定义需要用到的数据,包括时间轴的数据和其他图表数据。 3. 在mounted生命周期钩子函数中初始化Echarts画板,并配置时间轴相关的配置项。 4. 在配置项中,可以使用timeline属性来配置时间轴参数,包括时间轴类型、时间轴的起始和结束时间、时间轴的间隔和步长等。 5. 在初始化画板后,可以通过绑定timelinechanged事件来监听时间轴的变化,从而获取当前选中的时间轴下标或其他相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Echarts使用(Vue) 时间轴事件绑定、单图例多种切换](https://blog.csdn.net/YourNikee/article/details/105709340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

柠檬不萌c

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

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

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

打赏作者

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

抵扣说明:

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

余额充值