echarts的xAxis的type=’time’

最新推荐文章于 2025-06-06 15:22:13 发布

原创最新推荐文章于 2025-06-06 15:22:13 发布 · 2.9w 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #echarts的xAxis的type=’time’

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨ECharts中xAxis参数的配置方法，特别是针对时间数据的展示方式。介绍了如何选择type属性来创建类目型或时间轴折线图，自定义坐标轴刻度、显示格式以及系列数据的正确格式。同时，提供了tooltip、series等关键属性的设置技巧，帮助读者掌握高级图表定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

熟悉下echarts图表，options配置项的xAxis参数

当你的数据有时间和值，你可以做成类目型折线图，也可以做成时间轴折线图。类目型就是点与点之间等距，时间不等距；而做成时间轴，则时间等距，两点之间不一定等距。

options基本属性

1. xAxis的type，data

type
- category
- time
min (坐标轴刻度最小值)
- ‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。
- 不设置时会自动计算最小值保证坐标轴刻度的均匀分布
- 也可以用函数写一个刻度方法，value参数，是包含min和max的对象
```
min: function(value) {
    return value.min - 20;
}
```
max（与min一致）
splitNumber （分割段数，在类目轴中无效）
data（数据数组）

当type为category时，x轴必须通过 data 设置类目数据
x轴自定义显示的方法在axisLabel的formatter函数中设置

axisLabel:{
   	color:"#8da5b2",
   	formatter:(value,index)=>{
 	  	let xDate = new Date(value);
		return xDate.getFullYear()+"年"+" "+xDate.getMonth()+1+"/"+xDate.getDate()+" "+xDate.getHours()+":"+xDate.getMinutes()+":"+xDate.getSeconds();
   	}
}

2. toolbar

自定义鼠标点上去的弹框显示

tooltip:{
  	trigger:'axis',
   	formatter: function (params) {
   		let index = params[0].dataIndex
	}
},

3. series

type （图表类型）
- line
name （影响默认的tooltip显示）
showSymbol: true;
hoverAnimation: true(鼠标滑过点的时候，点放大的效果，默认为true)

当xAxis的type为类目的时候，显示的symbol会随着x轴数据多的情况，自动隐藏部分symbol，即showAllSymbol的随主轴标签间隔隐藏策略。
但当xAxis的type为time的时候，就不会自动隐藏，会每个都显示。
当type为类目的时候，data就是一般的数据数据，但当type是time的时候，data的格式就变成
[['2019-8-14 8:00:00', 1], ['2019-8-14 8:10:00', 3], ['2019-8-14 8:20:00', 5], ['2019-8-14 8:30:00', 6], ['2019-8-14 8:40:00', 66],['2019-8-14 8:50:00', 8], ['2019-8-14 9:00:00',11], ['2019-8-14 9:20:00', 32], ['2019-8-14 9:30:00', 54]]
当然，时间格式是时间戳的行式也可以[1522306819000, 2]

当type=time时，x轴不需要再另外设置data。
只需要再series中的data设为二维数组，每个元素是时间戳和值。
此时x轴会自定刻度间隔，需要自定义的话，使用splitNumber属性

自定义在折线上显示值的方法

label: { //显示值的算法，有一定间距的显示
   	show: true,
    color:'#8da5b2',
    formatter:(params)=>{
		return params.value[1]+'°C';
	}
}