当前位置：首页 > news >正文

ECharts 中轴的分类及常见使用场景

news 来源：原创 2025/6/9 15:27:59

在 ECharts 中，轴（Axis）的类型和组合方式非常灵活，可以适应多种图表需求。以下是 ECharts 中轴的分类及常见使用场景：

1. 按坐标系分类

ECharts 支持多种坐标系，不同坐标系下轴的组合和类型不同：

1.1 直角坐标系（Cartesian）

默认坐标系，包含 xAxis 和 yAxis，适用于大多数图表（如折线图、柱状图、散点图）。
轴类型：
- xAxis：支持 'category'（类目轴）、'value'（数值轴）、'time'（时间轴）、'log'（对数轴）。
- yAxis：同上。

示例：

option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};

1.2 极坐标系（Polar）

用于雷达图、饼图、极坐标折线图等。
轴类型：
- radiusAxis（半径轴）：数值轴，表示半径方向。
- angleAxis（角度轴）：数值或类目轴，表示角度方向。

示例（雷达图）：

option = {
  polar: {},
  radiusAxis: { type: 'value', min: 0, max: 100 },
  angleAxis: { type: 'category', data: ['维度1', '维度2', '维度3'] },
  series: [{ type: 'radar', data: [80, 60, 90] }]
};

1.3 单轴（SingleAxis）

仅使用一个轴，适用于某些特殊图表（如日历图、热力图）。
轴类型：singleAxis，支持数值、类目、时间等类型。

示例（热力图）：

option = {
  singleAxis: { type: 'value' },
  series: [{ type: 'heatmap', data: [[0, 0, 10], [1, 1, 20]] }]
};

1.4 平行坐标系（Parallel）

用于高维数据分析，多个轴并行排列。
轴类型：parallelAxis，支持数值、类目等类型。

示例：

option = {
  parallelAxis: [
    { dim: 0, name: '维度1', type: 'value' },
    { dim: 1, name: '维度2', type: 'category', data: ['A', 'B'] }
  ],
  series: [{ type: 'parallel', data: [[10, 'A'], [20, 'B']] }]
};

2. 按数据类型分类

轴的 type 属性决定了数据解析方式：

'category'：离散类目数据（如文本标签）。
'value'：连续数值数据。
'time'：时间序列数据。
'log'：对数变换后的数值数据。

3. 无轴的图表

某些图表类型不需要传统意义的轴，例如：

3.1 饼图（Pie）

通过扇形角度和颜色区分数据，无需轴。

示例：

option = {
  series: [{
    type: 'pie',
    data: [{ value: 10, name: 'A' }, { value: 20, name: 'B' }]
  }]
};

3.2 仪表盘（Gauge）

使用角度和指针表示数值。

示例：

option = {
  series: [{ type: 'gauge', data: [{ value: 50 }] }]
};

3.3 树图（Tree）或关系图（Graph）

通过节点和连线表示层级或关系，无需轴。

4. 特殊轴组合

4.1 双数值轴（双 Y 轴）

用于对比两组不同量纲的数据。

示例：

option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: [{ type: 'value' }, { type: 'value' }], // 双 Y 轴
  series: [
    { type: 'line', data: [10, 20, 30], yAxisIndex: 0 },
    { type: 'line', data: [100, 200, 150], yAxisIndex: 1 }
  ]
};

4.2 混合坐标系

同一图表中组合不同坐标系（如直角坐标系 + 极坐标系）。

总结

分类	轴类型	适用场景
直角坐标系	`xAxis`, `yAxis`	折线图、柱状图、散点图
极坐标系	`radiusAxis`, `angleAxis`	雷达图、极坐标折线图
单轴	`singleAxis`	热力图、日历图
平行坐标系	`parallelAxis`	高维数据对比
无轴图表	-	饼图、仪表盘、树图