ArKTS: McPieChart
ArKTS: McPieChart
geovindu
发布于 2026-06-18 19:16:18
发布于 2026-06-18 19:16:18
/**
# encoding: utf-8
# 版权所有 2025 ©涂聚文有限公司™ ®
# 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
# 描述： ohpm install @mcui/mccharts
# Author : geovindu,Geovin Du 涂聚文.
# IDE : DevEco Studio 5.1.1 HarmonyOS ArKTS
# os : windows 10
# database : mysql 9.0 sql server 2019, postgreSQL 17.0 Oracle 21c Neo4j
# Datetime : 2025/8/5 20:19
# User : geovindu
# Product : DevEco Studio
# Project : sqliteAppHelper
# File : WeightPage.ets
**/
import { WeightBody } from '../../Model/WeightBody';
import { router } from '@kit.ArkUI'
@Entry
@Component
struct WeightPage {
@State message: string = '体重检测';
@State weightbody:WeightBody=new WeightBody();
@State bodyweight:number=0;
@State bodyheight:number=0;
build() {
Column() {
Row()
{
Text('身高')
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
TextInput({ placeholder: '请输入身高M', text: ''})
.onChange((value) => {
if(value!='')
this.bodyheight = Number(value)
})
}
Row(){
Text('体重')
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
TextInput({ placeholder: '请输入体重KG', text: ''})
.onChange((value) => {
if(value!='')
this.bodyweight = Number(value)
})
}
Row() {
Button() {
Text('提交')
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
.onClick(() => {
this.weightbody.BodyHeight=this.bodyheight;
this.weightbody.BodyWeight=this.bodyweight;
this.weightbody.BMI=this.bodyweight/Math.pow(this.bodyheight,2);
router.push({
url: 'pages/mychart/PideChartWeightPage',
params: {
weightInfo: this.weightbody //传值
}
})
})
}
Button('返回')
.onClick(() => {
router.push({
url: 'pages/mychart/ChartsIndexPage'
})
})
}
}
.height('100%')
.width('100%')
}
}
/*
# encoding: utf-8
# 版权所有 2025 ©涂聚文有限公司™ ®
# 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
# 描述：
# Author : geovindu,Geovin Du 涂聚文.
# IDE : DevEco Studio 5.1.1 HarmonyOS ArKTS
# os : windows 10
# database : mysql 9.0 sql server 2019, postgreSQL 17.0 Oracle 21c Neo4j
# Datetime : 2025/8/6 20:55
# User : geovindu
# Product : DevEco Studio
# Project : sqliteHelper
# File : PideChartWeightPage.ets
*/
import promptAction from '@ohos.promptAction'
import { router } from '@kit.ArkUI';
import { Options,McPieChart,chartInterface } from '@mcui/mccharts'
import { WeightBody } from '../../Model/WeightBody'
// 2. 定义传递的参数类型（包含user属性）
interface WeightParams {
weightInfo: WeightBody;
}
@Entry
@Component
struct PideChartHeartPage {
@State message: string = '';
@State conclusion: string = '';
@State bodyweight:number=0;
@State bodyheight:number=0;
@State bodysata:number=0;
@State weights: WeightBody = new WeightBody();
@State seriesOption: Options = new Options(
{
color: ['#ff848684', 18.5>=this.bodysata && this.bodysata<=23.5 ?
'#ff05ef2a' : '#ffff0026'
],
//设置图例的相关样式与功能
legend: {
top: '5%', //图例距离顶部侧位置
itemWidth: 10, //图形的宽度
itemHeight: 10, //图形的高度
textStyle: {
//文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 50, //字体大小
fontWeight: '800' //字体粗细
}
},
title: {
show: true,
text: `BMI:${this.bodysata}`, // 主标题文本
subtext: '参考范围:18.5-23.9', // 副标题文本
top: '50%',
},
series: [
{
radius: ['50%', '30%'], // 饼图外半径、内半径
//center: ['50%', '30%'], // 饼图中心位置
labelLine: {
//文本连接线样式配置
length: 50, //连接线1的长度
length2: 50, //连接线2的长度
lineStyle: {
//提示线样式
width: 1, //线宽度
color: '#FAAD14' //线颜色
}
},
label: {
//系列文本标签样式配置
show: true, //是否显示文本标签
fontWeight: '800', //字体粗细
fontFamily: 'sans-serif',
color: '#333', //字体颜色
position: 'outside', //文本显示位置
fontSize: 60, //字体大小
distanceToLabelLine: 6 //字体与饼状间距
},
data: [
{
name: '身高',
value: this.bodyheight
},
{
name: '体重',
value: this.bodyweight
}
]
}
],
}
)
/**
* 显示内容
*/
async displayContent() {
//BMI
this.bodysata = Number((this.bodyweight / Math.pow(this.bodyheight, 2)).toFixed(2));
if (this.bodysata < 18.5) {
this.message = 'BMl(Body MassIndex，身体质量指数)是国际通用的衡量人体胖瘦程度及健康风险的指标，通过体重和身高的比例计算得出，适用于大多数成年人(排除肌肉量异常者，如运动员、孕妇等)。消瘦';
this.conclusion = '消瘦';
promptAction.showToast({ message: '消瘦' })
} else if (this.bodysata <= 24) {
this.message = 'BMl(Body MassIndex，身体质量指数)是国际通用的衡量人体胖瘦程度及健康风险的指标，通过体重和身高的比例计算得出，适用于大多数成年人(排除肌肉量异常者，如运动员、孕妇等)。正常值';
this.conclusion = "正常值";
promptAction.showToast({ message: '正常值' })
} else {
this.message = 'BMl(Body MassIndex，身体质量指数)是国际通用的衡量人体胖瘦程度及健康风险的指标，通过体重和身高的比例计算得出，适用于大多数成年人(排除肌肉量异常者，如运动员、孕妇等)。超重';
this.conclusion = "超重";
promptAction.showToast({ message: '超重' })
}
}
// 关键修复：用@Builder装饰器定义UI构建方法
@Builder
customTooltip(tooltipInfo: chartInterface.InterfaceObj) {
Column() { // 建议包裹一个容器组件，方便布局
if (tooltipInfo.title) {
Text(tooltipInfo.title)
.fontSize(16)
.fontWeight(FontWeight.Bold)
}
ForEach(tooltipInfo.data, (item: chartInterface.InterfaceObj) => {
Text(`${item.name}：${item.num}`)
.fontSize(14)
})
}
.padding(10)
.backgroundColor('#ffffff')
.borderRadius(5)
.shadow({ radius: 3 })
}
aboutToAppear(): void {
const params = router.getParams() as WeightParams | undefined;
if (params?.weightInfo) {
this.weights = params.weightInfo as WeightBody;
this.bodyweight = this.weights.BodyWeight;
this.bodyheight = this.weights.BodyHeight;
this.bodysata = this.weights.BMI;
}
this.displayContent();
setTimeout(() => {
this.seriesOption.setVal({
color: ['#ff848684', 18.5>=this.bodysata && this.bodysata<=23.5 ?
'#ffff0026' : '#ff05ef2a'
],
//设置图例的相关样式与功能
legend: {
top: '5%', //图例距离顶部侧位置
itemWidth: 10, //图形的宽度
itemHeight: 10, //图形的高度
textStyle: {
//文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 30, //字体大小
fontWeight: '800' //字体粗细
}
},
title: {
show: true,
text: `BMI:${this.bodysata}`, // 主标题文本
subtext: '参考范围:18.5-23.9', // 副标题文本
top: '50%',
},
series: [
{
radius: ['50%', '30%'],
labelLine: {
//文本连接线样式配置
length: 50, //连接线1的长度
length2: 50, //连接线2的长度
lineStyle: {
//提示线样式
width: 1, //线宽度
color: '#FAAD14' //线颜色
}
},
label: {
//系列文本标签样式配置
show: true, //是否显示文本标签
fontWeight: '800', //字体粗细
fontFamily: 'sans-serif',
color: '#333', //字体颜色
position: 'outside', //文本显示位置
fontSize: 60, //字体大小
distanceToLabelLine: 6 //字体与饼状间距
},
data: [
{
name: '身高',
value: this.bodyheight
},
{
name: '体重',
value: this.bodyweight
}
]
}
]
})
}, 2000)
}
build() {
Column({space: 10}) {
Row() {
// 传入自定义tooltip构建器（根据mccharts的API调整属性名）
McPieChart({ options: this.seriesOption })
.width('100%')
.height('100%')
}
.height('50%')
.width('100%')
Row() {
Text(this.conclusion) //结论
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor(18.5 >= this.bodysata && this.bodysata <= 23.5 ? '#fff10505' : '#ff05ef2a')
.margin(10)
.align(Alignment.Center)
}
.textExtend('#ffd09af3')
Row() {
Text(this.message) //描述
.fontSize(16)
.fontWeight(FontWeight.Bold)
.margin(10)
.align(Alignment.Center)
}
.textExtend('#ffe5d1d1')
Row() {
Button() {
Text('返回')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#fff10505')
.onClick(() => {
router.back()
})
}
}
}
.width('100%')
.height('100%')
}
}
/**
*
* @param color
*/
@Extend(Row)
function textExtend(color:string) {
.width('99%')
.justifyContent(FlexAlign.Center)
.borderRadius(10)
.backgroundColor(color)
}第二种：
/*
# encoding: utf-8
# 版权所有 2025 ©涂聚文有限公司™ ®
# 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎
# 描述： ohpm install @mcui/mccharts
# 收缩压（Systolic pressure） 舒张压（Diastolic pressure）
# https://developer.huawei.com/consumer/cn/forum/topic/0207179071718932445
# Author : geovindu,Geovin Du 涂聚文.
# IDE : DevEco Studio 5.1.1 HarmonyOS
# os : windows 10
# database : mysql 9.0 sql server 2019, postgreSQL 17.0 Oracle 21c Neo4j
# Datetime : 2025/8/03 20:20
# User : geovindu
# Product : DevEco Studio
# Project : SQLiteApp
# File : PideChartPage.ets
*/
import promptAction from '@ohos.promptAction'
import { router } from '@kit.ArkUI';
import { Options,McPieChart,chartInterface } from '@mcui/mccharts'
import { BloodPressure } from '../../Model/BloodPressure'
import { BoodStat } from "../../Common/BoodStat"
// 2. 定义传递的参数类型（包含user属性）
interface BloodParams {
booldInfo: BloodPressure;
}
@Entry
@Component
struct PideChartPage {
@State message: string = '';
@State conclusion:string='';
@State Systolic:number=108; //在大于120时，显示红色
@State Diastolic:number=80;
@State heartRate:number=80; //小于80时大于60时，显示绿色,80-120时，显示蓝色，大于80时小于60时，显示红色
@State textColor:string = ''
@State boolds:BloodPressure=new BloodPressure();
@State seriesOption: Options = new Options(
{
color: ['#ff848684',BoodStat.getFontColor(this.Systolic)
],
//设置图例的相关样式与功能
legend: {
top: '5%', //图例距离顶部侧位置
itemWidth: 10, //图形的宽度
itemHeight: 10, //图形的高度
textStyle: {
//文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 30, //字体大小
fontWeight: '800' //字体粗细
}
},
title: {
show: true,
text: `${this.Systolic}次/分种`, // 主标题文本
textStyle: {
//主标题文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 55, //字体大小
fontWeight: '800' //字体粗细
},
subtext: '参考范围60-120', // 副标题文本
subtextStyle: {
//副标题文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 35, //字体大小
fontWeight: '800' //字体粗细
},
top: '50%',
},
series: [
{
radius: ['50%', '30%'],
labelLine: { //文本连接线样式配置
length: 10, //连接线1的长度
length2: 10, //连接线2的长度
lineStyle: { //提示线样式
width: 1, //线宽度
color: '#FAAD14' //线颜色
}
},
label: { //系列文本标签样式配置
show: true, //是否显示文本标签
fontWeight: '800', //字体粗细
fontFamily: 'sans-serif',
color: '#333', //字体颜色
position: 'outside', //文本显示位置
fontSize: 60, //字体大小
distanceToLabelLine: 6 //字体与饼状间距
},
data: [
{
name: '舒张压',
value: this.Diastolic
},
{
name: '收缩压',
value: this.Systolic
}
]
}
],
}
)
/**
* 显示内容
*/
async displayContent()
{
this.heartRate=this.Systolic/(this.Systolic+this.Diastolic);
this.message=BoodStat.getContent(this.Systolic)
this.textColor=BoodStat.getFontColor(this.Systolic)
this.conclusion=BoodStat.getTitle(this.Systolic)
}
// 关键修复：用@Builder装饰器定义UI构建方法
@Builder
customTooltip(tooltipInfo: chartInterface.InterfaceObj) {
Column() { // 建议包裹一个容器组件，方便布局
if (tooltipInfo.title) {
Text(tooltipInfo.title)
.fontSize(16)
.fontWeight(FontWeight.Bold)
}
ForEach(tooltipInfo.data, (item: chartInterface.InterfaceObj) => {
Text(`${item.name}：${item.num}`)
.fontSize(14)
})
}
.padding(10)
.backgroundColor('#ffffff')
.borderRadius(5)
.shadow({ radius: 3 })
}
aboutToAppear(): void {
// 也可以 const params = router.getParams() as BloodPressure | undefined;
const params = router.getParams() as Record<string, BloodPressure> // BloodPressure | undefined;
if (params['booldInfo']) { //?.booldInfo booldInfo 名称和传递过来的参数名称一致
//this.boolds=new BloodPressure(); params.booldInfo
//也可以
//this.boolds=params.booldInfo as BloodPressure;
this.boolds=params['booldInfo'] //as BloodPressure;
// this.boolds.Systolic=params.booldInfo.Systolic;
// this.boolds.Diastolic=params.booldInfo.Diastolic;
// this.boolds.HeartRate=params.booldInfo.HeartRate;
this.Systolic=this.boolds.Systolic; //Systolic
this.Diastolic=this.boolds.Diastolic; //Diastolic
this.heartRate=this.boolds.HeartRate; //HeartRate
}
this.displayContent();
setTimeout(() => {
this.seriesOption.setVal({
color: ['#ff848684', BoodStat.getFontColor(this.Systolic)
],
//设置图例的相关样式与功能
legend: {
top: '5%', //图例距离顶部侧位置
itemWidth: 10, //图形的宽度
itemHeight: 10, //图形的高度
textStyle: {
//文本样式配置
color: '#ff00b4ff', //字体颜色
fontSize: 30, //字体大小
fontWeight: '800' //字体粗细
}
},
title: {
show: true,
text: `${this.Systolic}次/分种`, // 主标题文本
textStyle: {
//主标题文本样式配置
color: '#fff60b0b', //字体颜色
fontSize: 55, //字体大小
fontWeight: '800' //字体粗细
},
subtext: '参考范围60-120', // 副标题文本
subtextStyle: {
//副标题文本样式配置
color: '#ee0f1015', //字体颜色
fontSize: 35, //字体大小
fontWeight: '800' //字体粗细
},
top: '50%',
},
series: [
{
radius: ['50%', '30%'],
labelLine: { //文本连接线样式配置
length: 10, //连接线1的长度
length2: 10, //连接线2的长度
lineStyle: { //提示线样式
width: 1, //线宽度
color: '#FAAD14' //线颜色
}
},
label: { //系列文本标签样式配置
show: true, //是否显示文本标签
fontWeight: '800', //字体粗细
fontFamily: 'sans-serif',
color: '#333', //字体颜色
position: 'outside', //文本显示位置
fontSize: 60, //字体大小
distanceToLabelLine: 6 //字体与饼状间距
},
data: [
{
name: '舒张压',
value: this.Diastolic
},
{
name: '收缩压',
value: this.Systolic
}
]
}
]
})
}, 2000)
}
build() {
Column({space: 10}) {
Row(){
// 传入自定义tooltip构建器（根据mccharts的API调整属性名）
McPieChart({options:this.seriesOption})
.width('100%')
.height('100%')
}
.height('50%')
.width('100%')
Row() {
Text(this.conclusion) //结论
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor(BoodStat.getFontColor(this.Systolic))
.margin(10)
.align(Alignment.Center)
}
.textExtend('#ffe5dada')
Row() {
Text(this.message) //描述
.fontSize(16)
.fontWeight(FontWeight.Bold)
.margin(10)
.width('100%')
}
.textExtend('#ffd68989')
Row() {
Button() {
Text('返回')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#fff10505')
.onClick(() => {
router.back()
})
}
}
}
.width('100%')
.height('100%')
}
}
/**
*
* @param color
*/
@Extend(Row)
function textExtend(color:string) {
.width('99%')
.justifyContent(FlexAlign.Center)
.borderRadius(10)
.backgroundColor(color)
}输出：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号