echarts 文档中描述了x轴的多种类型
一、type: ‘value’
‘value’ 数值轴,适用于连续数据。
此时x轴数据是从零开始,有数据大小的区分。
【注意】
因为xAxis.data是为category服务的,所以xAxis.data里面设置的数据无效。
二、type: ‘category’
‘category’ 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
此时x轴数据是数组中取值的,且不是从零开始,没有数据大小的区分。
【注意】
如果设置了 type 是 ‘category’,但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。
三、type: ‘time’
‘time’ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
主要是用于x轴是时间的数据展示中。
因为分级模板在网上的例子太少,在实践中摸索出了要怎么使用,所以主要记录 xAxis.axisLabel.formatter 中的分级模板
如何使用。
分级模板:为不同时间粒度的标签使用不同的 formatter,object 类型
可以实现对不同的时间粒度采用不同的数据展示。
如果准备采用分级模板,注意的是,x轴的显示是根据数据来的,不需要额外设置。如果数据范围是年-月,那么月的数据展示会用 formatter.month 的设置来展示,如果月之间跨年,那么会用formatter.month 的设置来展示,这都是组件自动转化的,不需要额外设置。
以年间隔展示
以月间隔展示
以日间隔展示
以小时间隔展示
综上,组件会根据跨度的范围来决定使用年,月,日还是小时范围的刻度。