ECharts 入门教程 yAxis的基本属性

2024-02-25 开发教程 ECharts 入门教程 匿名 5

在 ECharts 中直角坐标系的 y 轴有可能是不显示的,如果我们要配置 yAxis 的属性,首先就需要将 y 轴显示出来。那么,就存在以下的问题:

要怎么操作能够显示 y 轴?y 轴显示后,它在 grid 组件中的索引是怎样的?它处于什么样的位置?与默认的位置有发生偏移吗?它是什么类型的坐标轴?怎么定义它的名称及名称的位置?

上述的问题都针对了 yAxis 的一些基本属性的设置,下面让我们一一来解决。

yAxis.show | boolean

[ default: true ]

表示是否显示 yAxis 的 y 轴。

yAxis.gridIndex | number

[ default: 0 ]

得到 y 轴所在的 grid 的索引,默认位于第一个 grid。

yAxis.position | string

得到 y 轴的位置。

可以选择的值:

  • 'left'
  • 'right'
注意:默认 grid 中的第一个 y 轴在 grid 的左侧('left'),第二个 y 轴视第一个 y 轴的位置放在另一侧。

yAxis.offset | number

[ default: 0 ]

显示 Y 轴相对于默认位置的偏移,该属性在相同的 position 上有多个 Y 轴的时候会使用到。

yAxis.type | string

[ default: 'value' ]

得到 y 坐标轴的类型。

以下是可选的 y 轴类型:

  • 'value' :数值轴,适用于连续数据。
  • 'category' :类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
  • 'time' :时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
  • 'log' :对数轴。适用于对数数据。

yAxis.name | string

显示坐标轴的名称。

yAxis.nameLocation | string

[ default: 'end' ]

得到坐标轴名称的显示位置。

可以选择:

  • 'start'
  • 'middle'
  • 'end'

yAxis.nameGap | number

[ default: 15 ]

坐标轴名称与轴线之间的距离。

yAxis.nameRotate | number

[ default: null ]

坐标轴名字旋转,是个角度值。