鸿蒙5莓创图表组合图组件深度讲解：基础属性篇

陈杨
• 阅读 2

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineBarChart组合图组件的基础属性详细用法。本文将通过分点拆解每个属性的核心功能和使用方式，帮助开发者快速掌握该组件的定制能力。

一、grid（绘图网格）

作用：控制图表主体与容器边界的间距 类型：Object 默认：空对象{} 可选值：可设置left/right/top/bottom四个方向的数值或百分比 场景：当图表需要适应不同屏幕尺寸时，通过调整边距避免内容被遮挡 代码案例：

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

@Entry
@Component
struct GridExample {
  @State options: Options = new Options({
    grid: {
      left: 80,    // 重点配置项
      right: 40,
      top: 100,
      bottom: 40
    },
    xAxis: {
      data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
      name: '产值(万元)'
    },
    series: [
      {
        name: '产量',
        type: 'bar',
        data: [450, 520, 480, 600]
      }
    ]
  })

  build() {
    Column() {
      McLineBarChart({ options: this.options })
        .aspectRatio(1.5)
    }
    .padding(16)
  }
}

二、color（调色盘）

作用：定义系列数据的默认配色方案 类型：String[] 默认：['#296DFF', '#ff5495fd', ...] 可选值：任意HEX/RGBA颜色值数组 场景：统一多系列图表视觉风格时使用 代码案例：

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

@Entry
@Component
struct ColorExample {
  @State options: Options = new Options({
    color: ['#FF6B6B', '#4ECDC4'], // 重点配置项
    xAxis: {
      data: ['苹果', '香蕉', '橙子']
    },
    yAxis: {
      name: '销量(吨)'
    },
    series: [
      {
        name: '线上',
        type: 'bar',
        data: [120, 150, 90]
      },
      {
        name: '线下',
        type: 'line',
        data: [80, 110, 75]
      }
    ]
  })

  build() {
    Row() {
      McLineBarChart({ options: this.options })
    }
    .height('60%')
  }
}

三、title（标题）

作用：配置图表主标题显示 类型：Object 默认：{show:true, text:'基础', right:20, top:22} 可选值：支持text文本、show显隐、位置坐标等 场景：需要突出图表主题时 代码案例：

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

@Entry
@Component
struct TitleExample {
  @State options: Options = new Options({
    title: {  // 重点配置项
      show: true,
      text: '水果季度销售报告',
      subtext: '2023年度数据',
      left: 'center',
      textStyle: {
        color: '#2c3e50',
        fontSize: 20
      }
    },
    xAxis: {
      data: ['春季', '夏季', '秋季', '冬季']
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [250, 380, 420, 310]
      }
    ]
  })

  build() {
    Column() {
      McLineBarChart({ options: this.options })
    }
    .width('100%')
    .height(400)
  }
}

四、legend（图例）

作用：控制数据系列的图例显示 类型：Object 默认：水平排列在顶部 可选值：支持位置、图标形状、选中状态等 场景：多系列数据需要分类标识时 代码案例：

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

@Entry
@Component
struct LegendExample {
  @State options: Options = new Options({
    legend: {  // 重点配置项
      show: true,
      orient: 'vertical',
      right: 10,
      top: 'middle',
      icon: 'rect',
      itemWidth: 16,
      itemHeight: 8
    },
    xAxis: {
      data: ['北京', '上海', '广州']
    },
    series: [
      {
        name: '用户量',
        type: 'bar',
        data: [5000, 7000, 4500]
      },
      {
        name: '增长率',
        type: 'line',
        data: [15, 22, 18]
      }
    ]
  })

  build() {
    Row() {
      McLineBarChart({ options: this.options })
    }
    .height('55%')
  }
}

五、tooltip（提示框）

作用：配置数据点的交互提示信息 类型：Object 默认：半透明黑色背景 可选值：可自定义边框、背景色、文本样式 场景：需要增强数据可读性时 代码案例：

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

@Entry
@Component
struct TooltipExample {
  @State options: Options = new Options({
    tooltip: {  // 重点配置项
      trigger: 'axis',
      backgroundColor: '#FFF3E0',
      borderColor: '#FFA726',
      textStyle: {
        color: '#BF360C',
        fontSize: 14
      }
    },
    xAxis: {
      data: ['早', '中', '晚']
    },
    series: [
      {
        name: '客流量',
        type: 'line',
        data: [120, 250, 180]
      }
    ]
  })

  build() {
    Column() {
      McLineBarChart({ options: this.options })
    }
    .padding(20)
  }
}

六、xAxis（X轴）

作用：配置横坐标轴样式 类型：Object（必填） 默认：黑色轴线+等宽标签 可选值：轴线样式、标签旋转、格式化等 场景：处理长文本标签或特殊格式需求 代码案例：

xAxis: {
  axisLabel: {
    rotate: 45,     // 标签倾斜45度
    formatter: (name) => name.substring(0,3) // 显示前3个字符
  }
}

七、yAxis（Y轴）

作用：配置纵坐标轴样式 类型：Object/Array（支持多Y轴） 默认：左侧单轴 可选值：位置、刻度范围、分割线等 场景：双指标数据对比时 代码案例：

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

@Entry
@Component
struct YAxisExample {
  @State options: Options = new Options({
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月']
    },
    // 双Y轴配置
    yAxis: [
      {
        name: '温度(℃)',
        position: 'left',
        axisLabel: {
          formatter: '{value} °C' // 温度单位
        },
        splitLine: {
          show: false // 隐藏左侧辅助线
        }
      },
      {
        name: '降水量(mm)',
        position: 'right',
        axisLabel: {
          color: '#91CC75', // 绿色文字
          formatter: '{value} mm'
        }
      }
    ],
    series: [
      {
        name: '温度',
        type: 'line',
        yAxisIndex: 0, // 关联第一个Y轴
        data: [8, 12, 18, 23, 28],
        color: '#FF6B6B'
      },
      {
        name: '降水量',
        type: 'bar',
        yAxisIndex: 1, // 关联第二个Y轴
        data: [45, 60, 85, 70, 55],
        color: '#91CC75'
      }
    ]
  })

  build() {
    Column() {
      McLineBarChart({ options: this.options })
    }
    .height(400)
  }
}

八、dataZoom（区域缩放）

作用：实现图表数据区域缩放 类型：Object 默认：关闭状态 可选值：start/end定义初始显示范围 场景：大数据量局部聚焦分析 代码案例：

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

@Entry
@Component
struct DataZoomExample {
  @State options: Options = new Options({
    xAxis: {
      data: Array.from({length: 30}, (_,i) => `第${i+1}天`) // 生成30天数据
    },
    dataZoom: {
      show: true,
      start: 60, // 初始显示60%位置
      end: 100    // 到100%位置
    },
    series: [
      {
        name: '访问量',
        type: 'line',
        data: Array.from({length: 30}, () => Math.floor(Math.random()*1000)), // 随机数据
        smooth: true
      }
    ]
  })

  build() {
    Column() {
      McLineBarChart({ options: this.options })
        .aspectRatio(1.5)
    }
    .padding(20)
  }
}

九、animation（动画）

作用：控制图表初始化动画 类型：Boolean 默认：true（开启） 可选值：true/false 场景：需要提升性能时关闭动画 代码案例：

animation: false // 禁止初始动画

十、series（数据系列）

作用：定义图表核心数据与样式 类型：Object[]（必填） 默认：无 可选值：支持line/bar类型混排 场景：组合图表的核心配置 代码案例：

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

@Entry
@Component
struct SeriesExample {
  @State options: Options = new Options({
    xAxis: {
      data: ['A产品', 'B产品', 'C产品']
    },
    yAxis: {
      name: '销售额'
    },
    series: [
      {
        name: '线上销售',
        type: 'bar',
        data: [150, 230, 180],
        barWidth: '30%', // 柱宽30%
        itemStyle: {
          color: {
            type: 'linear', // 渐变效果
            colorStops: [
              { offset: 0, color: '#83AFFE' }, 
              { offset: 1, color: '#296DFF' }
            ]
          }
        },
        label: {
          show: true, // 显示数值标签
          position: 'top'
        }
      },
      {
        name: '目标达成率',
        type: 'line',
        data: [85, 95, 90],
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: {
          width: 3,
          type: 'dotted'
        }
      }
    ]
  })

  build() {
    Row() {
      McLineBarChart({ options: this.options })
    }
    .height('50%')
  }
}

好，这期讲到这里就结束了，希望大家通过本文的系统讲解，能够熟练掌握McLineBarChart组件的各项基础属性配置。在实际开发中，建议先确定可视化需求，再按模块逐步配置对应属性，遇到特殊场景时可随时查阅本文的配置指南。下期我们将深入讲解动态数据更新和自定义样式的进阶技巧，敬请期待！

鸿蒙开发前端开发
点赞
收藏
评论区
推荐文章
陈杨 陈杨
•
8小时前
鸿蒙5横向柱状图基础属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解横向柱状图（McHorBarChart）基础属性的详细用法。本文将全面解析每个配置项的作用、类型、默认值、可选值和使用场景，并通过完整代码案例帮助您快速掌握。一、grid网格布局作用：控制图表绘图区
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5横向柱状图series属性解析
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McHorBarChart（横向柱状图）组件中series属性的详细用法。series属性是控制柱状图数据系列的核心配置项，掌握好这些属性可以让你轻松创建各种样式的柱状图效果。1.name属性作用：
5
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创雷达图表series属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解雷达图（McRadarChart）的series属性详细用法。作为图表数据展示的核心配置，series属性直接影响数据呈现形式和交互体验，下面我们逐一拆解每个属性的用法。一、name属性作用：定义数
4
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表饼图基础属性讲解
大家好，欢迎回来鸿蒙5莓创图表组件的专场！我们这一期来深入讲解McCharts组合图组件的基础属性用法，涵盖grid、color、title、legend、tooltip、animation、series七大核心属性。每个属性都将从作用、类型、默认值、可选
3
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表饼图tooltip属性用法
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件中tooltip属性的完整用法。这个功能模块是数据可视化交互的核心配置，掌握它的细节能让图表信息展示更专业。下面我们从底层属性开始逐层拆解：一、基础开关属性show作用：控制是否显示浮动提
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表雷达基础属性教程
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解雷达图组件McRadarChart的基础属性详细用法。一、grid属性作用：控制直角坐标系内绘图网格的布局，用于设置图表内容与容器的边距关系类型：Object默认值：空对象场景：当需要调整图表四周边
3
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表组合图组件深度讲解：xAxis属性篇
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象，掌握它的各项属性对于定制化图表至关重要。1.type作用：指定X轴的类型类型：String默认值：'data'可选
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创仪表盘图表组件属性用法解析
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McGaugeChart仪表盘组件的基础属性详细用法。一、grid属性作用：控制图表与容器边界的间距，替代旧版cPadding系列属性，实现更灵活的布局控制。类型：Object默认值：（空对象，表示
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创折线与柱状图组合图表属性用法详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineBarChart组合图组件的基础属性详解。本篇将深度拆解每个属性的用法场景，通过完整代码案例帮助开发者快速掌握核心配置技巧。一、grid属性（网格布局）作用：控制图表内容与容器的边距类型
3
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创折线与柱状图legend属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件McLineBarChart中legend属性的详细用法。1.show属性作用：控制是否显示图例类型：Boolean默认值：true可选值：true|false场景：当需要隐藏图例时设置为
2
0
0
陈杨
陈杨
Lv1
或许我一直徒劳无功的执着才知道之后该怎么洒脱
文章
130
粉丝
0
获赞
0
热门文章
鸿蒙5开发宝藏案例分享---一多开发实例（游戏）
鸿蒙5开发宝藏案例分享---性能体验设计
鸿蒙5开发宝藏案例分享---分析帧率问题
鸿蒙5开发宝藏案例分享---Swiper组件性能优化实战
HarmonyOS5云服务技术分享--匿名登录功能指南