坐标轴系统

1. 坐标轴类型和组件

ECharts 支持多种坐标轴类型，以适应不同的数据格式和可视化需求

1.1 坐标轴类型

数值轴：显示连续的数值数据
类目轴：显示离散的类目数据
时间轴：专用于时间数据
对数轴：对值范围大的数据使用对数刻度

每种坐标轴类型在刻度计算、标签格式化和刻度线生成方面都有独特的行为。

1.2 坐标轴组件

ECharts 中的坐标轴由多个可单独配置的视觉组件组成

来源: test/axis-interval2.html125-140 test/axis-lastLabel.html75-86

2. 坐标轴配置架构

坐标轴系统遵循基于组件的架构，其中每个坐标轴实例都包含多个可配置的子组件

来源: test/axis-interval2.html124-154 test/axis-lastLabel.html78-86 test/bar-overflow-time-plot.html74-79

3. 主要特性和行为

3.1 间隔管理

坐标轴系统智能地计算显示刻度线和标签的适当间隔，以避免拥挤。这在缩放或调整图表大小时尤为重要。

间隔计算考虑以下因素：

可用空间
字体大小和旋转
数据点数量
用户定义的间隔设置

来源: test/axis-interval2.html109-222 test/axis-interval2.html762-789

3.2 标签格式化和定位

坐标轴系统提供了广泛的选项来定制标签显示

格式化器：支持模板字符串和自定义格式化函数
旋转：能够旋转标签以处理长文本
位置控制：显示/隐藏特定标签的选项（例如，showMinLabel, showMaxLabel）
溢出处理：智能定位以防止标签重叠

时间轴的格式化器示例

来源: test/axis-lastLabel.html82-85 test/bar-overflow-time-plot.html75-78

3.3 对齐和边界处理

ECharts 提供了对坐标轴如何与数据点对齐的精确控制

alignWithLabel：使刻度线与标签对齐，而不是在它们之间
boundaryGap：控制坐标轴边界与第一个/最后一个数据点之间的间距
onZero：将坐标轴线放置在垂直坐标轴的零位

这些选项影响数据在图表坐标空间中的视觉定位方式。

来源: test/axis-interval2.html300-301 test/axis-interval2.html128-129

4. 坐标轴系统集成

坐标轴系统与 ECharts 生态系统中的其他几个组件集成

来源: test/axis-interval2.html114-222 test/bar-overflow-time-plot.html69-116

4.1 网格组件关系

Grid 组件定义了坐标轴和图表元素的绘制区域

一个图表中可以存在多个网格
每个网格可以包含多个坐标轴
坐标轴可以放置在网格的任何一侧（上、下、左、右）

来源: test/axis-interval2.html807-812 test/axis-lastLabel.html380-389

4.2 DataZoom 集成

DataZoom 组件允许用户聚焦于特定的数据范围

修改坐标轴的可见范围
触发坐标轴间隔和标签的重新计算
可以同时链接到多个坐标轴

来源: test/axis-interval2.html155-167 test/bar-overflow-time-plot.html95-102

5. 高级配置选项

5.1 多坐标轴

ECharts 支持在同一图表上使用多个坐标轴来表示不同的数据刻度

系列可以通过 xAxisIndex 和 yAxisIndex 属性引用特定的坐标轴。

来源: test/axis-interval2.html757-790 test/axis-lastLabel.html380-426

5.2 自定义刻度线和标签间隔

刻度线和标签都可以使用自定义间隔

数值间隔：显示每第n个刻度线/标签
基于函数的间隔：使用回调函数来确定显示哪些刻度线/标签

来源: test/axis-interval2.html675-678 test/axis-interval2.html779-783

5.3 分隔线和分隔区域

分隔线和分隔区域可以定制以增强可读性

自定义颜色和样式
独立于坐标轴刻度线的间隔
根据条件显示/隐藏的功能

来源: test/axis-interval2.html315-323 test/axis-interval2.html452-460

6. 实现细节

坐标轴系统实现承担多项职责

布局计算：确定坐标轴位置和大小
刻度计算：将数据值转换为像素坐标
标签管理：生成和定位标签
视觉渲染：绘制坐标轴线、刻度线和其他视觉元素
事件处理：处理缩放和平移等交互

来源: test/axis-interval2.html test/axis-lastLabel.html

7. 最佳实践和常见陷阱

7.1 性能考量

标签数量：过多的坐标轴标签会影响渲染性能
格式化函数：复杂的格式化函数可能会导致性能下降
分隔线/区域：过多的分隔线/区域会增加渲染开销

7.2 常见问题

问题	原因	解决方案
标签重叠	可用空间标签过多	使用旋转，增加图表大小，或自定义间隔
标签缺失	`showMinLabel`/`showMaxLabel` 设置为 false	启用这些选项或调整坐标轴范围
刻度不正确	不合适的最小/最大值设置	让 ECharts 自动计算或设置合适的最小/最大值
刻度线不一致	组件之间间隔设置不同	对齐刻度线、标签和分隔线的间隔设置

来源: test/axis-interval2.html1336-1339 test/axis-lastLabel.html109-110 test/axis-lastLabel.html252-253

8. 总结

Apache ECharts 中的坐标轴系统为基于坐标的可视化提供了坚实的基础。其灵活的配置选项和智能的默认设置使开发人员能够以最少的代码创建定制的、可读的图表，并在需要时支持高级定制。

该系统平衡了最佳值的自动计算与精细的手动控制，既便于使用又可实现精确的视觉设计。理解坐标轴系统是创建有效 ECharts 图表的关键，因为它构成了所有数据可视化的坐标基础。

来源: test/axis-interval2.html test/axis-lastLabel.html test/bar-overflow-time-plot.html