Echarts 双 Y 轴详解

一、什么是双 Y 轴

Echarts 双 Y 轴是一种常见的图表类型，它可以在同一张图表中展示多个指标，每个指标都有自己的 Y 轴。这种图表类型主要用于展示异构指标之间的关系，可以帮助用户更加直观地理解这些指标之间的关系。

二、如何使用双 Y 轴

使用 Echarts 双 Y 轴非常简单，只需要在配置项中设置 yAxis 数组，并将其中的每个轴分别配置即可。例如：

option = {
  yAxis: [
    {
      type: 'value',
      ...
    },
    {
      type: 'value',
      ...
    }
  ],
  ...
};

其中，yAxis 数组中的每个元素都是一个配置项对象，可以通过设置对象中的各个属性来对该 Y 轴进行自定义。例如，可以设置轴类型、刻度范围、名称、刻度标签样式、轴线样式等等。具体属性请参考 Echarts 官方文档。

三、双 Y 轴的配置项

1. yAxis.type

yAxis.type 属性用于设置 Y 轴的类型，可选值有 'value'、'category'、'time'、'log'，分别表示数值轴、类目轴、时间轴和对数轴。默认值为 'value'。

yAxis: {
  type: 'value'
}

2. yAxis.name

yAxis.name 属性用于设置 Y 轴的名称。

yAxis: {
  name: '销售额'
}

3. yAxis.nameTextStyle

yAxis.nameTextStyle 属性用于设置 Y 轴名称的样式，可以设置字体颜色、字号、字体粗细等。

yAxis: {
  name: '销售额',
  nameTextStyle: {
    color: '#333',
    fontSize: 14,
    fontWeight: 'bold'
  }
}

4. yAxis.min 和 yAxis.max

yAxis.min 和 yAxis.max 属性用于设置 Y 轴的刻度范围。默认情况下，Echarts 会自动计算刻度范围，以适应数据的范围。但是有时候我们需要手动设置这个范围，以显示更加直观的图表。例如：

yAxis: {
  min: 0,
  max: 100
}

5. yAxis.splitNumber

yAxis.splitNumber 属性用于设置 Y 轴的刻度分割数量，默认为 5。如果将其设置为10，则 Y 轴上会展示更多的刻度，图表会显示更加精细的数据变化趋势。

yAxis: {
  splitNumber: 10
}

6. yAxis.axisLine

yAxis.axisLine 属性用于设置 Y 轴轴线的样式，可以设置轴线颜色、宽度、类型等。

yAxis: {
  axisLine: {
    lineStyle: {
      color: '#ccc',
      width: 2,
      type: 'dashed'
    }
  }
}

7. yAxis.axisTick

yAxis.axisTick 属性用于设置 Y 轴刻度线的样式，可以设置刻度线长度、宽度、颜色等。

yAxis: {
  axisTick: {
    length: 10,
    lineStyle: {
      color: '#333',
      width: 2
    }
  }
}

8. yAxis.axisLabel

yAxis.axisLabel 属性用于设置 Y 轴刻度标签的样式，可以设置字体大小、颜色、间隔等。

yAxis: {
  axisLabel: {
    fontSize: 12,
    color: '#999',
    interval: 0
  }
}

9. yAxis.inverse

yAxis.inverse 属性用于控制 Y 轴的方向，如果设置为 true，则 Y 轴的刻度会从右往左展示，这在某些需要从右到左展示的图表中非常有用。

yAxis: {
  inverse: true
}

10. yAxis.gridIndex

yAxis.gridIndex 属性用于将 Y 轴和指定的网格组合起来展示，可以实现多个 Y 轴在同一张图表中展示，但每个 Y 轴只能在一个网格中展示。可以通过设置不同的 gridIndex 值来将多个 Y 轴分别和不同的网格组合展示。

yAxis: {
  gridIndex: 0
}

四、结语

通过本文的阐述，我们可以看到 Echarts 双 Y 轴的配置项非常丰富，可以根据不同的数据类型和展示需求进行自由配置。通过合理的配置，我们可以让图表更加直观、易懂，帮助用户更加深入地理解数据。