选服务好的网站建设公司中国建设银行财付通网站

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 的设置来展示，这都是组件自动转化的，不需要额外设置。

以年间隔展示

以月间隔展示

以日间隔展示

以小时间隔展示

综上，组件会根据跨度的范围来决定使用年，月，日还是小时范围的刻度。