鸿蒙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

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]
    }
  }
}

这个配置会创建一个：

数值类型的Y轴，显示"销售额"作为名称
轴范围从0到1000，间隔200
轴线为灰色，宽度1px
刻度线长度为6px，灰色
标签显示为"¥"前缀的数值
分割线为浅灰色虚线

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

posted @ 2025-06-25 09:46 woo爷说前端阅读(11) 评论(0) 收藏举报

刷新页面返回顶部

woo爷说前端

为你专属的前端知识