ArKTS: McPieChart

/**
 # 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 >18.5 && this.bodysata <= 24) {
      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)
}

输出：