echart 设置y轴间隔_echarts横坐标轴为时间时,自定义显示时间粒度(时间间隔)

最近参加一个开源项目在使用echarts,发现好多人遇到需要自定义X轴时间刻粒度这个问题,为此发篇文章给大家讲解一下

1、代码判断

xAxis: {

type: 'time',

splitLine: {

show: false

},

interval: 3600, // 设置x轴时间间隔

axisLabel: {

formatter: function(value, index) {

return liangTools.unix2hm(value)

}

}

},

首先要把xAxis 显示类型设置成time,然后设置对应X轴时间间隔,也就interval对应的参数,这个大家需要注意下,如果后台返回的时间戳是毫秒级的那么axisLabel下formatter定义中返回日期也是根据对应来进行转换,如果是基于秒的那么formatter也要基于秒来去转换日期格式,否则会不匹配

然后为了以后偷懒可以,把日期转换方法及毫秒转换秒的方法都贴上unix2hm: function(v) {

if (/^(-)?\d{1,10}$/.test(v)) {

v = v * 1000

} else if (/^(-)?\d{1,13}$/.test(v)) {

v = v * 1000

} else if (/^(-)?\d{1,14}$/.test(v)) {

v = v * 100

}

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值