echarts时间轴应用

echarts时间轴应用的两种方法

第一种，x轴设置type为value，然后还需要把x轴显示的时间戳通过格式化函数(formatter)转换为日期类型，series中的data转换为时间戳。数据类型一般较为常用的是二位数组的方式如: [ ['时间戳','y轴值'], ['时间戳','y轴值'] ] ；
第二种，x轴设置type为time(不需要转换X轴显示的文字) 正常情况下还应该定义一个x轴的起始范围，数据格式如： max: "2021-01-04 08:24:38" ， min: "2021-01-04 08:14:36"，然后series中的 data也应该设置为二位数组类型如：[ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56] ]。

第一种实现代码

option = {xAxis: {type: 'value',min:1651370400,max:1651377600,axisLabel:{formatter:function(e){return timestampToTime(e);},rotate:30}},yAxis: {type: 'value',min:0,max:80},series: [{data: [[1651372200,20],[1651373400,40],[1651377000,35]],type: 'line',}]
};function timestampToTime(timestamp) {var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear() + '-';var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';var D = (date.getDate() < 10 ? '0'+ date.getDate() : date.getDate()) + ' ';var h = (date.getHours() < 10 ? '0'+ date.getHours() : date.getHours()) + ':';var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()) + ':';var s = (date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds());return M+D+h+m+s;}

效果

第二种实现代码

option = {xAxis: {type: 'time',min: "2021-01-04 08:14:36",max: "2021-01-04 08:24:38",},yAxis: {type: 'value',
},series: [{data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56],["2021-01-04 08:20:46", 23],["2021-01-04 08:22:46", 40] ],type: 'line'}]
};

效果

echarts时间轴应用相关推荐

百度Echarts时间轴的注意事项
百度Echarts时间轴的注意事项以官方案例修改更加清晰分明现在做一下修改将X轴变为时间轴(中间会跨越) 修改 xAxis.type 为时间格式 [time] 如图修改数据格式为 [{name: ...
android时间轴折线图,echarts时间轴折线图
当使用echarts折线图时,每个数据会打点,在数据量小的时候,美观又快捷,但是当数据量过大时,会非常的卡,以及不美观例如: series: { symbol:'circle', } > EC ...
Echarts时间轴补刻度
有时候我们Echarts图表可能数据不够,只有一两条时,呈现效果不是很好 ,比如这样所以我们需要填充数据,让图表就算没有数据看起来横轴也可以接受 // 补时间轴数值,数据不足10条时,补足10条,把 ...
echarts时间轴传什么格式_职场必看，使用Excel实现大事件时间轴的做法，不看后悔...
生者为过客,死者为归人.天地一逆旅,同悲万古尘.月兔空捣药,扶桑已成薪.白骨寂无言,青松岂知春.前後更叹息,浮荣安足珍. --[唐]李白<拟古其九> 时间轴?什么是时间轴?相信下面的这种样 ...
echarts时间轴属性参数
时间轴,每个图表最多仅有一个时间轴控件. timeline的参数主要有: 名称默认值描述 {boolean} show true 显示策略,可选为:true(显示) | false(隐藏) {st ...
如何控制Echarts时间轴的刻度区间
我们可以通过Echarts中的xAxis.minInterval和xAxis.interval设置一个固定的时间间隔例如:1小时的时间间隔 {interval: 3600*1000,minInter ...
ECharts实例开发学习笔记二——时间轴
记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
ECharts xAxis.type='time'时间轴时卡顿问题
原文首发于我的个人网站: https://lonhon.top/ 卡顿问题出现背景: ECharts^4.0.4 + Vue^2.5.9 option中主要耗能设置为:折线图 + Y轴2 + seri ...
echarts散点图搭配时间轴
1.echarts搭配时间轴可以很直观的看到数据的动态变化,那么如何实现呢?请看代码. 2.这次做的散点图是学生的成绩随着时间的变化图,就是学生的成绩随着时间的变化而变化. x轴是时间,年月日,和时间 ...

echarts时间轴应用

第一种实现代码

第二种实现代码

echarts时间轴应用相关推荐

最新文章

热门文章