首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >鸿蒙5莓创图表组件折线类型的属性讲解-yAxis

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

原创
作者头像
陈杨
发布2025-06-25 11:15:02
发布2025-06-25 11:15:02
1740
举报

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

基础属性

type

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

代码语言:txt
复制
xAxis: {
  type: 'data'
}

name

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

代码语言:txt
复制
xAxis: {
  name: '月份'
}

show

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

代码语言:txt
复制
xAxis: {
  show: false // 隐藏X轴
}

position

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

代码语言:txt
复制
xAxis: {
  position: 'top' // X轴显示在顶部
}

nameGap

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

代码语言:txt
复制
xAxis: {
  nameGap: 15 // 增大名称与轴线的距离
}

nameLocation

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

代码语言:txt
复制
xAxis: {
  nameLocation: 'center' // 名称居中显示
}

nameTextStyle

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

nameTextStyle子属性

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

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

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

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

代码语言:txt
复制
xAxis: {
  nameTextStyle: {
    color: '#333',
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: 'Microsoft YaHei'
  }
}

数据范围属性

min

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

代码语言:txt
复制
xAxis: {
  min: 0 // 强制从0开始
}

max

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

代码语言:txt
复制
xAxis: {
  max: 100 // 强制到100结束
}

interval

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

代码语言:txt
复制
xAxis: {
  interval: 10 // 每10个单位显示一个刻度
}

minInterval

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

代码语言:txt
复制
xAxis: {
  minInterval: 1 // 最小间隔为1
}

maxInterval

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

代码语言:txt
复制
xAxis: {
  maxInterval: 100 // 最大间隔为100
}

boundaryGap

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

代码语言:txt
复制
xAxis: {
  boundaryGap: false // 不留白,数据紧贴两端
}

splitNumber

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

代码语言:txt
复制
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空白的虚线

代码语言:txt
复制
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

代码语言:txt
复制
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

代码语言:txt
复制
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

代码语言:txt
复制
xAxis: {
  splitLine: {
    show: true,
    lineStyle: {
      color: '#eee',
      width: 1,
      lineDash: [3, 3]
    }
  }
}

其他属性

data

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

代码语言:txt
复制
xAxis: {
  data: ['一月', '二月', '三月', '四月', '五月']
}

rLevel

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

代码语言:txt
复制
xAxis: {
  rLevel: -10 // 提高渲染层级
}

animationCurve

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

代码语言:txt
复制
xAxis: {
  animationCurve: 'linear' // 线性动画
}

animationFrame

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

代码语言:txt
复制
xAxis: {
  animationFrame: 60 // 更流畅的动画
}

实际应用案例

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

代码语言:txt
复制
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属性的各种用法,在实际开发中能够灵活运用这些属性来创建符合需求的图表效果。如果有任何问题,欢迎在评论区留言讨论。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基础属性
    • type
    • name
    • show
    • position
    • nameGap
    • nameLocation
    • nameTextStyle
      • nameTextStyle子属性
  • 数据范围属性
    • min
    • max
    • interval
    • minInterval
    • maxInterval
    • boundaryGap
    • splitNumber
  • 轴线样式属性
    • axisLine
      • axisLine子属性
  • 刻度样式属性
    • axisTick
      • axisTick子属性
  • 标签样式属性
    • axisLabel
      • axisLabel子属性
  • 分割线属性
    • splitLine
      • splitLine子属性
  • 其他属性
    • data
    • rLevel
    • animationCurve
    • animationFrame
  • 实际应用案例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档