各位开发者您们好，今天终于有时间跟大家分享一下我们自研的图表组件。我是莓创技术的架构师陈杨。本次课程由我给大家系统性得讲解整个图表组件的知识点，想学习的可以持续关注我的教学视频。莓创图表组件是一款深度适配鸿蒙5.0（ArkTS框架）的高效可视化工具。我们组件以“低门槛、高性能”为设计核心，开发体验对标Echarts。
不知道大家有没有使用过Echarts，但是对于很多新人来说，肯定是不知道，更别说图表组件中的属性了。这次就跟随我深入解读图表组件中的每一个属性的作用及效果，并通过实际案例帮助大家理解如何在项目中高效使用图表组件。
无论您是技术新人还是资深大佬，希望您能通过本次课程提升50%以上的图表开发效率，共同推动鸿蒙生态建设！
莓创图表有独立的官方文档提供给大家，让大家使用起来更加方便，请大家记住：http://meichuangit.net.cn/McLineChart。后续我们也会讲解整个文档的结构以及如何使用
McCharts组件基础使用
上一次在工具介绍的课程中，我们介绍了如何使用DevEco Studio的安装莓创图表组件。这节我们主要来讲莓创图表整体有哪些属性，这些属性是干嘛的，具体渲染出来是什么样子的，大家该如何利用。
1. 图表大小
由于组件没有内置设置图表大小以及背景相关的通用属性，所以一般需要有东西包裹着，因为内部都是百分百宽度与高度
示例代码：
import { McBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State defOption: Options = new Options({
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
}]
})
build() {
Row() {
McBarChart({
options: this.defOption
})
}
.width(300)
.height(500)
}
}2. grid属性
语义：直角坐标系内绘图网格，通俗来讲就是图表的外壳
作用：可以通过该属性来设置内边距，包含：left、top、right、bottom，四个方向
使用场景：
a. y轴的内容太长，会被裁掉，可以使用grid-left属性来设置左边的内边距，把y轴内容顶出来
b. x轴的内容换行太长，一样的道理，可以使用grid-bottom属性来控制
c. 去除默认值，让图表内容更加接近外框
示例代码：
import { McBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State defOption: Options = new Options({
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
}]
})
build() {
Row() {
McBarChart({
options: this.defOption
})
}
.width(300)
.height(500)
}
}3. color属性
语义：颜色
作用：设置折线图、柱状图或者饼图具体实例的颜色
使用场景：无处不在
示例代码：
import { McBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State defOption: Options = new Options({
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
color: ['#5495fd'],
series: [{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
}]
})
build() {
Row() {
McBarChart({
options: this.defOption
})
}
.height('50%')
}
}4. title属性
语义：图表的标题
作用：自定义标题内容，动态设置展示位置与图表内容为一体
使用场景：
a. 图表自定义标题展示
b. 环形图的内部标题与副标题
示例代码：
import { McBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State defOption: Options = new Options({
title: {
show: true,
text: '基础属性',
right: 20,
top: 30
},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
name: '温度'
},
series: [{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
}]
})
build() {
Row() {
McBarChart({
options: this.defOption
})
}
.height('50%')
}
}示例：如图所示
5. legend
语义：图例
作用：用来代表图表中每一个实例以及展示对应的名称，可用于控制对应实例的显示与隐藏
使用场景：
a. 展示对应的实例的名称，快速让用户知道对应颜色对应的名称
b. 控制内容显示与隐藏
示例代码：
import { McPieChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State legendOption: Options = new Options({
legend: {
show: true, // 控制显示或者隐藏
left: '10%', // 左侧位置
top: '40%', // 顶部位置
orient: 'vertical' // 垂直排列
},
series: [{
center: ['70%', '50%'], // 饼图中心位置
data: [
{ value: 435, name: 'IOS' },
{ value: 310, name: '安卓' },
{ value: 234, name: '我心澎湃' },
{ value: 135, name: '蓝河' },
{ value: 1548, name: '鸿蒙' }
]
}]
})
build() {
Row() {
McPieChart({
options: this.legendOption
})
}
.height('50%')
}
}示例效果：如图所示
6. tooltip属性
语义：提示层弹窗
作用：显示点击对应的实例信息
使用场景：
a. 显示对应线条的值或者占比，让数据更加直观
b. 自定义提示层的样式
c. 显示隐藏性的数值，丰富图表的数据展示
示例代码：
import { McBarChart, Options, chartInterface } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State tooltipOption: Options = new Options({
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 数据
},
tooltip: {
borderColor: '#f72659f5',
borderWidth: 1,
backgroundColor: '#fff',
textStyle: { // 文本样式配置
color: '#000'
}
},
series: [{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
}]
})
build() {
Row() {
McBarChart({
options: this.tooltipOption
})
}
.height('50%')
}
}本文总结
今天我们一起探索了莓创图表组件的核心基础属性，包括图表尺寸控制、grid布局调整、color颜色配置、title标题定制、legend图例交互，以及tooltip提示层优化。通过代码示例，相信大家已经掌握了如何快速上手这些属性，为鸿蒙应用的图表开发打下基础！
