HarmonyOS开辟：ArkTS语法的图表组件 - McCharts

笑看天下无敌手 · 2024-10-26 15:32:50

简介

mcCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库。作为HarmonyOS一款开源的图表组件库，组件库将会提供以下图表：折线图、柱状图、饼图、散点图、雷达图等等。并提供了配套的设计资源，充实满足可定制化的需求。
官方文档地址

mcCharts官方文档，快速跳转
安装教程

ohpm install @mcui/mccharts

复制代码

使用案例

1、折线图

引入折线图组件

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

复制代码

使用

@Entry
@Component
struct Index {
// 初始化数据
@State seriesOption: Options = new Options({
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
name:'温度'
},
series:[
{
name:'最高气温',
data:[11, 11, 15, 13, 12, 130, 10]
},
{
name:'最低气温',
data:[1, -20, 2, 5, 3, 2, 0]
}
]
})
// 动态修改数据
aboutToAppear() {
setTimeout(() => {
// 传递需要修改的属性与数值，不需要全部传
this.seriesOption.setVal({
series:[
{
name:'最高气温',
data:[110, 110, 150, 130, 120, 190, 100]
}
]
})
}, 2000)
}
build() {
Row() {
McLineChart({
options: this.seriesOption
})
}
.height('50%')
}
}

复制代码

options 基础参数先容

参数名范例必填分析xAxisxAxis非必填绘画直角坐标系 grid 中的 Y 轴。支持设置刻度、文本标签等功能以及样式。yAxisyAxis非必填绘画直角坐标系 grid 中的 Y 轴。支持设置刻度、文本标签、分割线等功能以及样式。seriesseries必填用折线将各个数据点标志毗连起来的图表，用于展现数据的变化趋势。 xAxis 属性参数先容

参数名范例必填分析axisLineaxisLine非必填坐标轴轴线相关设置。axisTickaxisTick非必填坐标轴刻度相关设置。axisLabelaxisLabel非必填坐标轴刻度标签的相关设置。dataarray必填坐标轴的类目数据。 yAxis 属性参数先容

参数名范例必填分析namestring非必填坐标轴名称。nameTextStylenameTextStyle非必填坐标轴名称的笔墨样式。axisLineaxisLine非必填坐标轴轴线相关设置。axisTickaxisTick非必填坐标轴刻度相关设置。axisLabelaxisLabel非必填坐标轴刻度标签的相关设置。 series 属性参数先容

参数名范例必填分析namestring必填系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption
更新数据和配置项时用于指定对应的系列。lineStylelineStyle非必填坐标轴名称的笔墨样式。axisLineaxisLine非必填线条样式。labellabel非必填图形上的文本标签，可用于分析图形的一些数据信息，比如值，名称等。itemStyleitemStyle非必填折线拐点标志的样式。dataarray必填系列中的数据内容数组。数组项通常为具体的数据项。 axisLine 公共属性参数先容

参数名范例必填分析默认值showboolean非必填是否显示坐标轴轴线。truelineStylelineStyle非必填坐标轴线样式相关设置。{}axisLabel.colorColor非必填坐标轴线线的颜色。'#333' 末了

有很多小伙伴不知道学习哪些鸿蒙开辟技能？不知道必要重点把握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有必要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开辟必把握的核心知识要点，内容包含了（ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技能知识点。

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，内容包含：ArkTS、ArkUI、Web开辟、应用模型、资源分类…等知识点。
获取以上完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程