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

HarmonyOS鸿蒙Next 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轴，显示"销售额"作为名称
2. 轴范围从0到1000，间隔200
3. 轴线为灰色，宽度1px
4. 刻度线长度为6px，灰色
5. 标签显示为"¥"前缀的数值
6. 分割线为浅灰色虚线

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