鸿蒙5莓创图表组件折线类型的属性讲解-yAxis

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解折线图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象，掌握它的各项属性对于定制化图表至关重要。

基础属性

type

作用：指定X轴的类型类型：String 默认值：'data' 可选值：'data'（数据轴）、'category'（类目轴）、'value'（数值轴）场景：当需要明确指定X轴类型时使用，通常使用默认值即可

xAxis: {
  type: 'data'
}

name

作用：设置X轴的名称类型：String 默认值：''（空字符串）场景：当需要为X轴添加说明性文字时使用

xAxis: {
  name: '月份'
}

show

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

xAxis: {
  show: false // 隐藏X轴
}

position

作用：设置X轴的位置类型：String 默认值：'bottom' 可选值：'bottom' | 'top' 场景：控制X轴显示在图表的顶部还是底部

xAxis: {
  position: 'top' // X轴显示在顶部
}

nameGap

作用：设置轴名称与轴线之间的距离类型：Number 默认值：5 场景：调整轴名称与轴线之间的间距

xAxis: {
  nameGap: 15 // 增大名称与轴线的距离
}

nameLocation

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

xAxis: {
  nameLocation: 'center' // 名称居中显示
}

nameTextStyle

作用：设置轴名称的文本样式类型：Object 默认值：见子属性场景：自定义轴名称的文本样式

nameTextStyle子属性

color 作用：文本颜色类型：String 默认值：'#999'

fontSize 作用：文本大小类型：Number 默认值：22

fontWeight 作用：文本粗细类型：String 默认值：'normal'

fontFamily 作用：字体类型类型：String 默认值：'sans-serif'

xAxis: {
  nameTextStyle: {
    color: '#333',
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: 'Microsoft YaHei'
  }
}

数据范围属性

min

作用：设置轴的最小值类型：String|Number 默认值：null 场景：强制设置轴的最小值，覆盖自动计算

xAxis: {
  min: 0 // 强制从0开始
}

max

作用：设置轴的最大值类型：String|Number 默认值：null 场景：强制设置轴的最大值，覆盖自动计算

xAxis: {
  max: 100 // 强制到100结束
}

interval

作用：设置轴刻度的间隔类型：Number 默认值：null 场景：强制设置刻度间隔，覆盖自动计算

xAxis: {
  interval: 10 // 每10个单位显示一个刻度
}

minInterval

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

xAxis: {
  minInterval: 1 // 最小间隔为1
}

maxInterval

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

xAxis: {
  maxInterval: 100 // 最大间隔为100
}

boundaryGap

作用：设置轴两端是否留白类型：Boolean 默认值：null 场景：控制数据是否紧贴轴的两端

xAxis: {
  boundaryGap: false // 不留白，数据紧贴两端
}

splitNumber

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

xAxis: {
  splitNumber: 10 // 将轴分成10段
}

轴线样式属性

axisLine

作用：设置轴线的样式类型：Object 默认值：见子属性场景：自定义轴线的显示和样式

axisLine子属性

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

lineStyle 作用：轴线样式类型：Object 默认值：见子属性

lineStyle子属性

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

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

lineDash 作用：设置虚线样式类型：Array 默认值：null 可选值：如[5, 5]表示5px实线5px空白的虚线

xAxis: {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#666',
      width: 2,
      lineDash: [5, 3] // 虚线样式
    }
  }
}

刻度样式属性

axisTick

作用：设置轴刻度的样式类型：Object 默认值：见子属性场景：自定义刻度的显示和样式

axisTick子属性

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

lineStyle 作用：刻度线样式类型：Object 默认值：见子属性

lineStyle子属性

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

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

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

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

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

xAxis: {
  axisTick: {
    show: true,
    lineStyle: {
      color: '#999',
      width: 1.5
    },
    interval: 8,
    length: 10
  }
}

标签样式属性

axisLabel

作用：设置轴标签的样式类型：Object 默认值：见子属性场景：自定义标签的显示和样式

axisLabel子属性

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

formatter 作用：标签格式化函数或字符串类型：String|Function 默认值：null 场景：自定义标签显示内容

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

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

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

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

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

interval 作用：标签显示间隔类型：String|Number 默认值：null

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

overflow 作用：文本超出处理方式类型：String 默认值：'none' 可选值：'none' | 'truncate' | 'breakAll'

margin 作用：标签与刻度距离类型：Number 默认值：5

shadowColor 作用：文本阴影颜色类型：String 默认值：'rgba(0, 0, 0, 0)'

shadowBlur 作用：文本阴影模糊度类型：Number 默认值：0

shadowOffsetX 作用：文本阴影X偏移类型：Number 默认值：0

shadowOffsetY 作用：文本阴影Y偏移类型：Number 默认值：0

xAxis: {
  axisLabel: {
    show: true,
    formatter: '{value}月', // 添加"月"后缀
    color: '#333',
    fontSize: 18,
    fontWeight: 600,
    rotate: 45, // 旋转45度
    overflow: 'truncate', // 超出截断
    margin: 10
  }
}

分割线属性

splitLine

作用：设置轴分割线的样式类型：Object 默认值：见子属性场景：自定义分割线的显示和样式

splitLine子属性

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

lineStyle 作用：分割线样式类型：Object 默认值：见子属性

lineStyle子属性

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

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

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

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

其他属性

data

作用：设置X轴的数据类型：Array 默认值：[] 场景：自定义X轴显示的数据项

xAxis: {
  data: ['一月', '二月', '三月', '四月', '五月']
}

rLevel

作用：设置X轴的渲染级别类型：Number 默认值：-20 场景：控制X轴与其他元素的层级关系

xAxis: {
  rLevel: -10 // 提高渲染层级
}

animationCurve

作用：设置X轴动画曲线类型：String 默认值：'easeOutCubic' 场景：自定义X轴动画效果

xAxis: {
  animationCurve: 'linear' // 线性动画
}

animationFrame

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

xAxis: {
  animationFrame: 60 // 更流畅的动画
}

实际应用案例

下面是一个完整的X轴配置案例，展示了一个销售数据图表的X轴设置：

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

@Entry
  @Component
  struct Index {
    @State maxData: number[] = [11, 11, 15, 13, 12, 130, 10]
    // 初始化数据
    @State seriesOption: Options = new Options({
      xAxis: {
          type: 'category',
          name: '季度销售数据',
          nameGap: 20,
          nameLocation: 'center',
          nameTextStyle: {
            color: '#333',
            fontSize: 24,
            fontWeight: 'bold'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
              width: 2
            }
          },
          axisTick: {
            show: true,
            length: 8,
            lineStyle: {
              color: '#999',
              width: 1.5
            }
          },
          axisLabel: {
            show: true,
            color: '#666',
            fontSize: 18,
            rotate: 0,
            formatter: '{value}季度',
            margin: 12
          },
          splitLine: {
            show: false
          },
          data: ['第一', '第二', '第三', '第四'],
          animationCurve: 'easeOutBack',
          animationFrame: 40
        },
      series:[
        {
          name:'季度销售数据',
          data: this.maxData
        }
      ]
    })
    build() {
      Row() {
        McLineChart({
          options: this.seriesOption
        })
      }
      .height('50%')
    }
  }

这个配置会显示一个带有"季度销售数据"标题的X轴，每个刻度标签会显示为"第一季度"、"第二季度"等，轴线和刻度都有自定义样式，并有平滑的动画效果。

好，这期讲到这里就结束了，希望大家通过这篇文章能够全面掌握莓创图表折线图组件中xAxis属性的各种用法，在实际开发中能够灵活运用这些属性来创建符合需求的图表效果。如果有任何问题，欢迎在评论区留言讨论。

基础属性

type

name

show

position

nameGap

nameLocation

nameTextStyle

nameTextStyle子属性

数据范围属性

min

max

interval

minInterval

maxInterval

boundaryGap

splitNumber

轴线样式属性

axisLine

axisLine子属性

lineStyle子属性

刻度样式属性

axisTick

axisTick子属性

lineStyle子属性

标签样式属性

axisLabel

axisLabel子属性

分割线属性

splitLine

splitLine子属性

lineStyle子属性

其他属性

data

rLevel

animationCurve

animationFrame

实际应用案例

Andriod第三方源码分析

Android进阶之旅-(Framework源码分析)

热门文章