本文主要是介绍echarts - xAxis.type设置time时该如何使用formatter的分级模板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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 的设置来展示，这都是组件自动转化的，不需要额外设置。
以年间隔展示
以月间隔展示
以日间隔展示
以小时间隔展示
综上，组件会根据跨度的范围来决定使用年，月，日还是小时范围的刻度。
这篇关于echarts - xAxis.type设置time时该如何使用formatter的分级模板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
