鸿蒙5莓创折线与柱状图yAxis属性详解

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件中yAxis属性的详细用法。yAxis是图表中非常重要的配置项，它决定了Y轴的显示方式、样式和行为。下面我们将全面解析yAxis的各个属性及其子属性。

## 基础属性

### type

作用：指定Y轴的类型 类型：String 默认值：'value' 可选值：'value'（数值轴）、'category'（类目轴）、'time'（时间轴） 场景：当需要显示数值数据时使用'value'，显示分类数据时使用'category'，显示时间序列时使用'time' 示例代码：

```

yAxis: {

type: 'value'

}

```

### name

作用：设置Y轴的名称 类型：String 默认值：'' 场景：当需要为Y轴添加说明性文字时使用 示例代码：

```

yAxis: {

name: '销售额(万元)'

}

```

### show

作用：控制是否显示Y轴 类型：Boolean 默认值：true 场景：当需要隐藏Y轴时设置为false 示例代码：

```

yAxis: {

show: false

}

```

### position

作用：设置Y轴的位置 类型：String 默认值：'left' 可选值：'left' | 'right' 场景：当图表需要左右两侧都显示Y轴时使用 示例代码：

```

yAxis: {

position: 'right'

}

```

### nameGap

作用：设置轴名称与轴线之间的距离 类型：Number 默认值：5 场景：当需要调整轴名称与轴线之间的距离时使用 示例代码：

```

yAxis: {

nameGap: 10

}

```

### nameLocation

作用：设置轴名称的位置 类型：String 默认值：'end' 可选值：'end' | 'center' | 'start' 场景：控制轴名称显示在轴线的起点、中点还是终点 示例代码：

```

yAxis: {

nameLocation: 'center'

}

```

## 名称文本样式

### nameTextStyle

作用：配置轴名称的文本样式 类型：Object 默认值：见子属性

#### nameTextStyle.color

作用：设置轴名称文本颜色 类型：String 默认值：'#999999' 示例代码：

```

yAxis: {

nameTextStyle: {

color: '#FF0000'

}

}

```

#### nameTextStyle.fontSize

作用：设置轴名称文本大小 类型：Number 默认值：22 示例代码：

```

yAxis: {

nameTextStyle: {

fontSize: 16

}

}

```

#### nameTextStyle.fontWeight

作用：设置轴名称文本粗细 类型：String 默认值：'normal' 可选值：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 | ... | 900 示例代码：

```

yAxis: {

nameTextStyle: {

fontWeight: 'bold'

}

}

```

#### nameTextStyle.fontFamily

作用：设置轴名称文本字体 类型：String 默认值：'sans-serif' 示例代码：

```

yAxis: {

nameTextStyle: {

fontFamily: 'Arial'

}

}

```

## 轴范围与刻度

### min

作用：设置Y轴的最小值 类型：String|Number 默认值：null 场景：当需要固定Y轴的最小值时使用，可以是数值或百分比字符串 示例代码：

```

yAxis: {

min: 0

}

```

### max

作用：设置Y轴的最大值 类型：String|Number 默认值：null 场景：当需要固定Y轴的最大值时使用，可以是数值或百分比字符串 示例代码：

```

yAxis: {

max: '120%'

}

```

### interval

作用：设置Y轴刻度的间隔 类型：Number 默认值：null 场景：当需要固定Y轴刻度间隔时使用 示例代码：

```

yAxis: {

interval: 100

}

```

### minInterval

作用：设置Y轴刻度的最小间隔 类型：Number 默认值：null 场景：防止刻度过于密集时使用 示例代码：

```

yAxis: {

minInterval: 1

}

```

### maxInterval

作用：设置Y轴刻度的最大间隔 类型：Number 默认值：null 场景：防止刻度过于稀疏时使用 示例代码：

```

yAxis: {

maxInterval: 100

}

```

### boundaryGap

作用：设置Y轴两端是否留白 类型：Boolean 默认值：null 场景：控制Y轴是否从最小值开始显示，还是留有一定空白 示例代码：

```

yAxis: {

boundaryGap: true

}

```

### splitNumber

作用：设置Y轴的分割段数 类型：Number 默认值：5 场景：控制Y轴大致分成多少段 示例代码：

```

yAxis: {

splitNumber: 4

}

```

## 轴线配置

### axisLine

作用：配置Y轴线的显示和样式 类型：Object 默认值：见子属性

#### axisLine.show

作用：控制是否显示Y轴线 类型：Boolean 默认值：true 示例代码：

```

yAxis: {

axisLine: {

show: false

}

}

```

#### axisLine.lineStyle

作用：配置Y轴线的样式 类型：Object 默认值：见子属性

##### axisLine.lineStyle.color

作用：设置Y轴线颜色 类型：String 默认值：'#DDE2EB' 示例代码：

```

yAxis: {

axisLine: {

lineStyle: {

color: '#333333'

}

}

}

```

##### axisLine.lineStyle.width

作用：设置Y轴线宽度 类型：Number 默认值：1 示例代码：

```

yAxis: {

axisLine: {

lineStyle: {

width: 2

}

}

}

```

##### axisLine.lineStyle.lineDash

作用：设置Y轴线为虚线 类型：Array 默认值：null 场景：当需要虚线效果时使用，数组表示实线和虚线的长度 示例代码：

```

yAxis: {

axisLine: {

lineStyle: {

lineDash: [5, 5]

}

}

}

```

## 轴刻度配置

### axisTick

作用：配置Y轴刻度的显示和样式 类型：Object 默认值：见子属性

#### axisTick.show

作用：控制是否显示Y轴刻度 类型：Boolean 默认值：true 示例代码：

```

yAxis: {

axisTick: {

show: false

}

}

```

#### axisTick.lineStyle

作用：配置Y轴刻度的样式 类型：Object 默认值：见子属性

##### axisTick.lineStyle.color

作用：设置Y轴刻度颜色 类型：String 默认值：'#DDE2EB' 示例代码：

```

yAxis: {

axisTick: {

lineStyle: {

color: '#666666'

}

}

}

```

##### axisTick.lineStyle.width

作用：设置Y轴刻度宽度 类型：Number 默认值：1 示例代码：

```

yAxis: {

axisTick: {

lineStyle: {

width: 2

}

}

}

```

##### axisTick.lineStyle.lineDash

作用：设置Y轴刻度为虚线 类型：Array 默认值：null 示例代码：

```

yAxis: {

axisTick: {

lineStyle: {

lineDash: [2, 2]

}

}

}

```

#### axisTick.interval

作用：设置Y轴刻度与标签的间隔 类型：Number 默认值：4 示例代码：

```

yAxis: {

axisTick: {

interval: 8

}

}

```

#### axisTick.length

作用：设置Y轴刻度本身的长度 类型：Number 默认值：5 示例代码：

```

yAxis: {

axisTick: {

length: 10

}

}

```

## 轴标签配置

### axisLabel

作用：配置Y轴标签的显示和样式 类型：Object 默认值：见子属性

#### axisLabel.show

作用：控制是否显示Y轴标签 类型：Boolean 默认值：true 示例代码：

```

yAxis: {

axisLabel: {

show: false

}

}

```

#### axisLabel.formatter

作用：格式化Y轴标签文本 类型：String|Function 默认值：null 场景：当需要自定义标签显示格式时使用 示例代码：

```

yAxis: {

axisLabel: {

formatter: '{value}%' // 显示百分比

}

}

// 或使用函数

yAxis: {

axisLabel: {

formatter: (value) => `$${value}`

}

}

```

#### axisLabel.color

作用：设置Y轴标签文本颜色 类型：String 默认值：'#999999' 示例代码：

```

yAxis: {

axisLabel: {

color: '#333333'

}

}

```

#### axisLabel.fontSize

作用：设置Y轴标签文本大小 类型：Number 默认值：22 示例代码：

```

yAxis: {

axisLabel: {

fontSize: 16

}

}

```

#### axisLabel.fontWeight

作用：设置Y轴标签文本粗细 类型：Number 默认值：400 示例代码：

```

yAxis: {

axisLabel: {

fontWeight: 700

}

}

```

#### axisLabel.fontFamily

作用：设置Y轴标签文本字体 类型：String 默认值：'sans-serif' 示例代码：

```

yAxis: {

axisLabel: {

fontFamily: 'Microsoft YaHei'

}

}

```

#### axisLabel.rotate

作用：设置Y轴标签文本旋转角度 类型：Number 默认值：0 场景：当标签较长需要旋转显示时使用 示例代码：

```

yAxis: {

axisLabel: {

rotate: 45

}

}

```

#### axisLabel.interval

作用：设置Y轴标签的显示间隔 类型：String|Number 默认值：0 场景：控制标签的显示密度，'auto'表示自动计算 示例代码：

```

yAxis: {

axisLabel: {

interval: 'auto'

}

}

```

#### axisLabel.width

作用：设置Y轴标签文本的宽度 类型：Number|null 默认值：null 场景：控制标签文本的宽度，超出部分根据overflow处理 示例代码：

```

yAxis: {

axisLabel: {

width: 100

}

}

```

#### axisLabel.overflow

作用：设置Y轴标签文本超出宽度时的处理方式 类型：String 默认值：'none' 可选值：'none'（无）| 'truncate'（截断）| 'breakAll'（换行） 示例代码：

```

yAxis: {

axisLabel: {

overflow: 'truncate'

}

}

```

#### axisLabel.margin

作用：设置Y轴标签与刻度之间的距离 类型：Number 默认值：5 示例代码：

```

yAxis: {

axisLabel: {

margin: 10

}

}

```

#### axisLabel.shadowColor

作用：设置Y轴标签文本阴影颜色 类型：String 默认值：'rgba(0, 0, 0, 0)' 示例代码：

```

yAxis: {

axisLabel: {

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

```

#### axisLabel.shadowBlur

作用：设置Y轴标签文本阴影模糊大小 类型：Number 默认值：0 示例代码：

```

yAxis: {

axisLabel: {

shadowBlur: 5

}

}

```

#### axisLabel.shadowOffsetX

作用：设置Y轴标签文本阴影X轴偏移 类型：Number 默认值：0 示例代码：

```

yAxis: {

axisLabel: {

shadowOffsetX: 2

}

}

```

#### axisLabel.shadowOffsetY

作用：设置Y轴标签文本阴影Y轴偏移 类型：Number 默认值：0 示例代码：

```

yAxis: {

axisLabel: {

shadowOffsetY: 2

}

}

```

## 分割线配置

### splitLine

作用：配置Y轴分割线的显示和样式 类型：Object 默认值：见子属性

#### splitLine.show

作用：控制是否显示Y轴分割线 类型：Boolean 默认值：true 示例代码：

```

yAxis: {

splitLine: {

show: false

}

}

```

#### splitLine.lineStyle

作用：配置Y轴分割线的样式 类型：Object 默认值：见子属性

##### splitLine.lineStyle.color

作用：设置Y轴分割线颜色 类型：String 默认值：'#DDE2EB' 示例代码：

```

yAxis: {

splitLine: {

lineStyle: {

color: '#EEEEEE'

}

}

}

```

##### splitLine.lineStyle.width

作用：设置Y轴分割线宽度 类型：Number 默认值：1 示例代码：

```

yAxis: {

splitLine: {

lineStyle: {

width: 0.5

}

}

}

```

##### splitLine.lineStyle.lineDash

作用：设置Y轴分割线为虚线 类型：Array 默认值：null 示例代码：

```

yAxis: {

splitLine: {

lineStyle: {

lineDash: [3, 3]

}

}

}

```

## 其他配置

### data

作用：设置Y轴的数据 类型：Array 默认值：[] 场景：当Y轴为类目轴时，用于指定类目数据 示例代码：

```

yAxis: {

type: 'category',

data: ['一月', '二月', '三月', '四月', '五月', '六月']

}

```

### rLevel

作用：设置Y轴的渲染级别 类型：Number 默认值：-20 场景：控制Y轴与其他元素的层级关系，数值越大越靠上 示例代码：

```

yAxis: {

rLevel: 0

}

```

### animationCurve

作用：设置Y轴动画的缓动曲线 类型：String 默认值：'linear' 场景：控制Y轴动画的过渡效果 示例代码：

```

yAxis: {

animationCurve: 'easeOutCubic'

}

```

### animationFrame

作用：设置Y轴动画的帧数 类型：Number 默认值：0 场景：控制Y轴动画的流畅度，0表示不限制 示例代码：

```

yAxis: {

animationFrame: 30

}

```

## 实际应用案例

下面是一个完整的Y轴配置示例，展示了如何在实际项目中使用这些属性：

```

yAxis: {

type: 'value',

name: '销售额',

nameLocation: 'end',

nameGap: 15,

nameTextStyle: {

color: '#333',

fontSize: 14,

fontWeight: 'bold'

},

min: 0,

max: 1000,

interval: 200,

axisLine: {

show: true,

lineStyle: {

color: '#999',

width: 1

}

},

axisTick: {

show: true,

length: 6,

lineStyle: {

color: '#666',

width: 1

}

},

axisLabel: {

show: true,

color: '#666',

fontSize: 12,

formatter: '¥{value}',

rotate: 0,

margin: 8

},

splitLine: {

show: true,

lineStyle: {

color: '#eee',

width: 1,

lineDash: [3, 3]

}

}

}

```

这个配置会创建一个：

1. 数值类型的Y轴，显示"销售额"作为名称

1. 轴范围从0到1000，间隔200

1. 轴线为灰色，宽度1px

1. 刻度线长度为6px，灰色

1. 标签显示为"¥"前缀的数值

1. 分割线为浅灰色虚线

好，这期讲到这里就结束了，希望大家通过这篇文章能够全面掌握莓创图表组件中yAxis属性的使用方法，在实际项目中灵活运用这些配置项，创建出更加美观、实用的数据可视化图表。如果有任何问题，欢迎在评论区留言讨论！