鸿蒙5莓创图表组件折线类型的属性讲解-yAxis鸿蒙5莓创图表组件专场：yAxis属性详解大家好，欢迎回来鸿蒙5莓创图

鸿蒙5莓创图表组件专场：yAxis属性详解

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解折线图组件中yAxis属性的详细用法。yAxis是控制图表Y轴显示和样式的重要配置项，掌握它的各项属性可以帮助我们创建更加专业和美观的数据可视化图表。

yAxis基础属性

type

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

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: 'left'
  },
  {
    position: 'right'
  }
]

nameGap

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

yAxis: {
  nameGap: 20
}

nameLocation

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

yAxis: {
  nameLocation: 'middle'
}

轴范围控制属性

min

作用：设置Y轴的最小值
类型：Number | String
默认值：null（自动计算）
场景：当需要固定Y轴范围时使用，可以是数值或百分比字符串

yAxis: {
  min: 0
  // 或 min: '20%'
}

max

作用：设置Y轴的最大值
类型：Number | String
默认值：null（自动计算）
场景：当需要固定Y轴范围时使用，可以是数值或百分比字符串

yAxis: {
  max: 100
  // 或 max: '80%'
}

interval

作用：强制设置轴刻度间隔
类型：Number
默认值：null（自动计算）
场景：当需要固定刻度间隔时使用

yAxis: {
  interval: 10
}

minInterval

作用：设置最小刻度间隔
类型：Number
默认值：null
场景：防止自动计算的刻度间隔过小时使用

yAxis: {
  minInterval: 1
}

maxInterval

作用：设置最大刻度间隔
类型：Number
默认值：null
场景：防止自动计算的刻度间隔过大时使用

yAxis: {
  maxInterval: 100
}

boundaryGap

作用：设置坐标轴两端空白策略
类型：Boolean
默认值：null
场景：控制坐标轴两端是否留白

yAxis: {
  boundaryGap: true
}

splitNumber

作用：设置坐标轴的分割段数
类型：Number
默认值：5
场景：控制坐标轴分割的段数，影响刻度数量

yAxis: {
  splitNumber: 6
}

轴样式配置

nameTextStyle

作用：设置轴名称的文本样式
类型：Object
默认值：

{
  color: '#999999',
  fontSize: 22,
  fontWeight: 'normal',
  fontFamily: 'sans-serif'
}

nameTextStyle.color

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

nameTextStyle.fontSize

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

nameTextStyle.fontWeight

作用：设置轴名称文本粗细
类型：String | Number
默认值：'normal'

nameTextStyle.fontFamily

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

yAxis: {
  nameTextStyle: {
    color: '#333',
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: 'Arial'
  }
}

axisLine

作用：设置轴线样式
类型：Object

axisLine.show

作用：是否显示轴线
类型：Boolean
默认值：true

axisLine.lineStyle

作用：设置轴线样式
类型：Object
默认值：

{
  color: '#DDE2EB',
  width: 1,
  lineDash: null
}

axisLine.lineStyle.color

作用：设置轴线颜色
类型：String
默认值：'#DDE2EB'

axisLine.lineStyle.width

作用：设置轴线宽度
类型：Number
默认值：1

axisLine.lineStyle.lineDash

作用：设置轴线虚线样式
类型：Array | null
默认值：null

yAxis: {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#FF0000',
      width: 2,
      lineDash: [5, 5]
    }
  }
}

axisTick

作用：设置轴刻度样式
类型：Object

axisTick.show

作用：是否显示轴刻度
类型：Boolean
默认值：true

axisTick.lineStyle

作用：设置轴刻度线样式
类型：Object
默认值：

{
  color: '#DDE2EB',
  width: 1,
  lineDash: null
}

axisTick.lineStyle.color

作用：设置刻度线颜色
类型：String
默认值：'#DDE2EB'

axisTick.lineStyle.width

作用：设置刻度线宽度
类型：Number
默认值：1

axisTick.lineStyle.lineDash

作用：设置刻度线虚线样式
类型：Array | null
默认值：null

axisTick.interval

作用：设置刻度线与标签的间隔
类型：Number
默认值：4

axisTick.length

作用：设置刻度线长度
类型：Number
默认值：5

yAxis: {
  axisTick: {
    show: true,
    lineStyle: {
      color: '#666',
      width: 2
    },
    interval: 5,
    length: 8
  }
}

axisLabel

作用：设置轴标签样式
类型：Object

axisLabel.show

作用：是否显示轴标签
类型：Boolean
默认值：true

axisLabel.formatter

作用：设置标签格式化函数或字符串
类型：String | Function
默认值：null
场景：当需要对标签进行格式化显示时使用

axisLabel.color

作用：设置标签文本颜色
类型：String
默认值：'#999999'

axisLabel.fontSize

作用：设置标签文本大小
类型：Number
默认值：22

axisLabel.fontWeight

作用：设置标签文本粗细
类型：Number
默认值：400

axisLabel.fontFamily

作用：设置标签文本字体
类型：String
默认值：'sans-serif'

axisLabel.rotate

作用：设置标签旋转角度
类型：Number
默认值：0

axisLabel.interval

作用：设置标签显示间隔
类型：Number | String
默认值：0
场景：当标签过多时可以设置间隔显示

axisLabel.width

作用：设置标签文本宽度
类型：Number | null
默认值：null

axisLabel.overflow

作用：设置标签文本超出宽度时的处理方式
类型：String
默认值：'none'
可选值：'none' | 'truncate' | 'breakAll'

axisLabel.margin

作用：设置标签与刻度之间的距离
类型：Number
默认值：5

axisLabel.shadowColor

作用：设置标签阴影颜色
类型：String
默认值：'rgba(0, 0, 0, 0)'

axisLabel.shadowBlur

作用：设置标签阴影模糊大小
类型：Number
默认值：0

axisLabel.shadowOffsetX

作用：设置标签阴影X轴偏移
类型：Number
默认值：0

axisLabel.shadowOffsetY

作用：设置标签阴影Y轴偏移
类型：Number
默认值：0

yAxis: {
  axisLabel: {
    show: true,
    formatter: '{value}°C',
    color: '#333',
    fontSize: 20,
    fontWeight: 600,
    rotate: 45,
    overflow: 'truncate',
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowBlur: 2
  }
}

splitLine

作用：设置分割线样式
类型：Object

splitLine.show

作用：是否显示分割线
类型：Boolean
默认值：false

splitLine.lineStyle

作用：设置分割线样式
类型：Object
默认值：

{
  color: '#DDE2EB',
  width: 1,
  lineDash: null
}

splitLine.lineStyle.color

作用：设置分割线颜色
类型：String
默认值：'#DDE2EB'

splitLine.lineStyle.width

作用：设置分割线宽度
类型：Number
默认值：1

splitLine.lineStyle.lineDash

作用：设置分割线虚线样式
类型：Array | null
默认值：null

yAxis: {
  splitLine: {
    show: true,
    lineStyle: {
      color: '#EEE',
      width: 1,
      lineDash: [3, 3]
    }
  }
}

高级属性

data

作用：设置Y轴数据
类型：Array
默认值：[]
场景：当Y轴为类目轴时使用

yAxis: {
  type: 'category',
  data: ['低', '中', '高']
}

rLevel

作用：设置渲染级别
类型：Number
默认值：-20
场景：控制渲染层级，数值越大渲染越靠上

animationCurve

作用：设置动画曲线
类型：String
默认值：'linear'
场景：控制动画效果

animationFrame

作用：设置动画帧数
类型：Number
默认值：0
场景：控制动画流畅度

完整示例

下面是一个完整的Y轴配置示例，展示了多种属性的组合使用：

import { McLineChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
    @State maxData: number[] = [11, 11, 15, 13, 12, 130, 10]
    @State minData: number[] = [1, -20, 2, 5, 3, 2, 0]
    // 初始化数据
    @State seriesOption: Options = new Options({
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        type: 'value',
        name: '温度(℃)',
        nameTextStyle: {
          color: '#FF4500',
          fontSize: 24,
          fontWeight: 'bold'
        },
        position: 'left',
        min: -30,
        max: 150,
        interval: 30,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#FF4500',
            width: 2
          }
        },
        axisTick: {
          show: true,
          length: 8,
          lineStyle: {
            color: '#FF4500',
            width: 2
          }
        },
        axisLabel: {
          color: '#FF4500',
          fontSize: 20,
          formatter: '{value}°C',
          rotate: 0
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 69, 0, 0.2)',
            width: 1,
            lineDash: [5, 5]
          }
        }
      },
      series:[
        {
          name:'最高气温',
          data: this.maxData
        },
        {
          name:'最低气温',
          data: this.minData
        }
      ]
    })
    // 动态修改数据
    aboutToAppear() {
        setTimeout(() => {
          // 传递需要修改的属性与数值，不需要全部传
          this.maxData = [110, 110, 150, 130, 120, 190, 100]
          this.minData = [-1, -2, -2, -5, 3, -2, 0]
          this.seriesOption.setVal({
            series:[
                {
                  name:'最高气温',
                  data: this.maxData
                },
                {
                  name:'最低气温',
                  data: this.minData
                }
            ]
          })
        }, 2000)
    }
    build() {
        Row() {
          McLineChart({
            options: this.seriesOption
          })
        }
        .height('50%')
    }
}

实际应用场景

在实际开发中，我们可以根据不同的业务需求灵活配置Y轴。例如：

金融图表：可能需要双Y轴，一个显示价格，一个显示交易量
科学图表：可能需要对数坐标轴来显示跨度很大的数据
监控图表：可能需要固定Y轴范围以便比较不同时间段的数据
移动端图表：可能需要调整标签大小和间距以适应小屏幕

好，这期讲到这里就结束了，希望大家通过这篇文章能够全面掌握莓创图表折线图组件中yAxis属性的使用方法。在实际开发中，可以根据具体需求灵活组合这些属性，创建出既美观又实用的数据可视化图表。如果有任何问题，欢迎在评论区留言讨论。