前言：之前因为公司业务需要把一天24小时内每一个时刻的数据展示在图表上，于是我去echarts官网找了一下实例，发现最贴近业务需求的一个表，它的X轴显示的最少单位是天，不是时分秒。然后我去网上找了很多相关文档都说得不明所以，最后只能经过自己的一番捣鼓，把最终想要的效果给弄出来了。
我先把能直接运行的代码贴出来，然后才说一些大部分人可能会卡住的关键的点
PS：在运行代码前请引入echarts的 js 库
创建一个div
<div id="charts" style="width: 600px;height:400px;">
</div>
js代码
var chart = echarts.init(document.getElementById('charts'));
data = [{"name":1596038400000,"value":[1596038400000,53]},{"name":1596039040000,"value":[1596039040000,51]},{"name":1596039680000,"value":[1596039680000,51]},{"name":1596040320000,"value":[1596040320000,51]},{"name":1596040832000,"value":[1596040832000,58]},{"name":1596041472000,"value":[1596041472000,67]},{"name":1596042112000,"value":[1596042112000,68]},{"name":1596042624000,"value":[1596042624000,54]},{"name":1596043264000,"value":[1596043264000,51]},{"name":1596043904000,"value":[1596043904000,57]},{"name":1596044416000,"value":[1596044416000,52]},{"name":1596045056000,"value":[1596045056000,54]},{"name":1596045696000,"value":[1596045696000,51]},{"name":1596046208000,"value":[1596046208000,51]},{"name":1596046848000,"value":[1596046848000,52]},{"name":1596047488000,"value":[1596047488000,51]},{"name":1596048000000,"value":[1596048000000,53]},{"name":1596048640000,"value":[1596048640000,52]},{"name":1596049280000,"value":[1596049280000,67]},{"name":1596049920000,"value":[1596049920000,59]},{"name":1596050432000,"value":[1596050432000,58]},{"name":1596051072000,"value":[1596051072000,52]},{"name":1596051712000,"value":[1596051712000,55]},{"name":1596052224000,"value":[1596052224000,53]},{"name":1596052864000,"value":[1596052864000,54]},{"name":1596053504000,"value":[1596053504000,54]},{"name":1596054016000,"value":[1596054016000,54]},{"name":1596054656000,"value":[1596054656000,52]},{"name":1596055296000,"value":[1596055296000,54]},{"name":1596055808000,"value":[1596055808000,65]},{"name":1596056448000,"value":[1596056448000,59]},{"name":1596057088000,"value":[1596057088000,55]},{"name":1596057600000,"value":[1596057600000,53]},{"name":1596058240000,"value":[1596058240000,55]},{"name":1596058880000,"value":[1596058880000,54]},{"name":1596059520000,"value":[1596059520000,55]},{"name":1596060032000,"value":[1596060032000,64]},{"name":1596060672000,"value":[1596060672000,57]},{"name":1596061312000,"value":[1596061312000,56]},{"name":1596061824000,"value":[1596061824000,55]},{"name":1596062464000,"value":[1596062464000,55]},{"name":1596063104000,"value":[1596063104000,55]},{"name":1596063616000,"value":[1596063616000,58]},{"name":1596064256000,"value":[1596064256000,79]},{"name":1596064896000,"value":[1596064896000,60]},{"name":1596065408000,"value":[1596065408000,63]},{"name":1596066048000,"value":[1596066048000,63]},{"name":1596066688000,"value":[1596066688000,82]},{"name":1596067200000,"value":[1596067200000,81]},{"name":1596067840000,"value":[1596067840000,78]},{"name":1596068480000,"value":[1596068480000,78]},{"name":1596069120000,"value":[1596069120000,65]},{"name":1596069632000,"value":[1596069632000,76]},{"name":1596070272000,"value":[1596070272000,80]},{"name":1596070912000,"value":[1596070912000,78]},{"name":1596107040000,"value":[1596107040000,70]},{"name":1596124799000,"value":[1596124799000,0]}];
option = {
title: [],//
legend:{},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
var hour = date.getHours();
var minutes = date.getMinutes();
if(hour < 10){
hour = '0' + hour;
}
if(minutes < 10){
minutes = '0' + minutes;
}
var dateStr = hour + ':' + minutes;
return dateStr + ' ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
splitNumber:8,
axisLine:{
lineStyle:{
color: '#1B2232'
}
},
axisLabel:{
formatter:function(value,index){
var date = new Date(value);
var hour = date.getHours();
var minutes = date.getMinutes();
if(hour < 10){
hour = '0' + hour;
}
if(minutes < 10){
minutes = '0' + minutes;
}
return hour + ':' + minutes;
},
color:'#1B2232'
}
},
yAxis: {
name:'数据',
nameTextStyle:{
color: '#1B2232',
fontSize:15
},
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color: '#1B2232'
}
},
axisLabel:{
color:'#1B2232'
}
},
series: [{
name: '',
type: 'line',
hoverAnimation: false,
smooth: true,
symbolSize: 4,
data: data
}]
};
chart.setOption(option);
上述代码可以直接运行，其中data是测试时的一些实例数据。
在echarts实例页面运行的效果如下：
PS:仅需要复制 data 和 option 到 echarts 实例页面下即可
接下来讲一下需要注意的关键点：
-
option相关设置
因为X轴要显示的是时间点，跟一般离散的数据不一样，它是连续的，所以xAxis的type属性要设置成time类型（这里echarts也有说，实例也有，只是正如我开头所说的，它的实例里时间最少单位是天），然后yAxis的type是常用的value（‘value’ 数值轴，适用于连续数据。）类型就可以了。因为要的是折线图，series的类型自然是line了。 -
关于数据类型（重点！！！）
应为X轴是显示时间的，所以X轴的数据必须是时间戳，而且是带毫秒的时间戳。如果不是时间戳，X轴上的时间点会不显示，或者X轴都画不出来。因为Y轴类型是value，所以Y轴的数据是数值就可以了。接着就是对数据的封装，可以参考我代码里的data的json数组。其实数组可以不用像我这样来封装，我这样封装是因为当初在根据官方实例踩坑时而遗留下来的json数组封装格式。其实可以直接封装成下面这种json数组格式。
//其中value[0]对应X轴的数据，value[1]对应Y轴数据
[{"value":[1596038400000,53]},{"value":[1596039040000,51]},{"value":[1596039680000,51]}]
PS：如果想展示某一天24小时内的数据，请确保时间戳是在同一天的不同时间点，如果在同一个时间戳上有多个不同的Y轴数据那么折线图会在X轴的一个点上形成一条竖线。还有我的数据在后台封装的时候，是根据时间戳排序，如果没有对时间戳排序，不知道echarts会不会对其排序，我没有试过，但我盲猜是可以的。
- tooltip的自定义显示
在echarts官网关于时间图表的实例中，用到了formatter这个属性来处理tooltip的自定义显示，formatter的模板变量可以应对比较简单数据，但是用来做时间折线图效果不太好。所以得用回调函数。
回调函数格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
老实说，我看不太懂这个格式，因为我不是专业前端。所以只能用笨办法，在回调函数里面把params输出，在浏览器控制台看看它的数据有什么。
可以看到params参数里面有很多数据，有些我都不知道是些什么数据，但只要关注红框里面的数据就行。这些数据其实就是data这个json数组里面的数据，其中value就是json数组里面的value对象，所以我才说其实不用按照我的方式来封装数据。当然name和value这些可能是echarts里默认要有的key，这个我不甚清楚，反正就按照这个格式来封装自己的数据了。在我的代码里获取了params[0]（从控制台可以看出，params是数组），然后就直接params.name和params.value[1]来拿数据了。如果没有封装name这个键值对，直接用params.value[0]来代替params.name。
- axisLabel自定义显示
其实axisLabel的自定义显示就是对于X轴上数值的自定义显示，如果不自己处理，echarts会按照它自己默认的方式来显示。比如我的数据是某一天24内的，如果不自定义axisLabel显示，X轴数值显示如下图：
可以看到echarts的默认处理是把日期也显示出来了，但当我们页面上有时间控件显示了当前日期，这个显示明显是多余的，如果要去掉就不得不自定义显示了。在控制台输出axisLabel的formatter属性的回调函数里的value如下图：
可以看到就是json数据里的时间戳，所以拿到了时间戳怎么自定义自己的X轴数值显示就不用我多说了。根据我的代码可以自行修改显示方式。
以上基本就是我在使用echarts来制作时间折线图的关键点了。如有疏漏欢迎指正。（其实有疏漏是肯定的，因为我不是一个前端工程师，哈哈~~）
转载请声明出处！！！
扫一扫
6863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
