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

陈_杨
171 阅读7分钟

大家好，欢迎回来鸿蒙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属性的各种用法，在实际开发中能够灵活运用这些属性来创建符合需求的图表效果。如果有任何问题，欢迎在评论区留言讨论。

avatar
文章
阅读
粉丝