鸿蒙 Next 数据面板组件 DataPanel 介绍

2025-06-25
北京
本文字数：2154 字
阅读完需：约 7 分钟

数据面板组件，用于将多个数据占比情况使用占比图进行展示。

本文介绍，环形、线性、自定义柱状面板。 可根据实际需求选取合适的面板类型。

注意：最多包含 9 个数据，数据面板的类型（不支持动态修改）

看一下演示效果和源码：

@Entry@ComponentV2struct DataPanelTest{  public color1: string = "#65ff00dd"  public color2: string = "#6500ff99"  public color3: string = "#65ffe600"  public color4: string = "#6595ff00"  public color5: string = "#65000dff"  public color6: string = "#650099ff"  @Local values:number[]=[]  //数据值列表，最多包含9个数据，大于9个数据则取前9个数据  @Local max:number=512  //表示数据的最大值  @Local type:DataPanelType=DataPanelType.Line //数据面板 圆形/直线
  @Local closeEffect:boolean = false //数据占比图表旋转动效和投影效果  //设置各数据段颜色 支持渐变色  @Local valueColors:Array<resourcecolor | lineargradient>=[this.color1, this.color2, this.color3, this.color4, this.color5, this.color6]  @Local trackBackgroundColor:ResourceColor='#08182431' //设置底板颜色  @Local strokeWidth:Length = 24 //设置圆环粗细  @Local offsetX: number = 15  @Local offsetY: number = 15 //X轴的偏移量  @Local radius: number = 5  //投影模糊半径
  @Local trackShadow:DataPanelShadowOptions|null = {    radius: this.radius,    colors: this.valueColors,    offsetX: this.offsetX,    offsetY: this.offsetY  }  aboutToAppear(): void {    this.values=[]    for (let index = 0; index < 6; index++) {      this.values.push(Math.random()*100)    }  }
  build() {    Column({space:10}){      DataPanel({ values: this.values, max: this.max, type: DataPanelType.Circle })        .width(200)        .height(200)        .closeEffect(this.closeEffect)        .valueColors(this.valueColors)        .trackShadow(this.trackShadow)        .strokeWidth(this.strokeWidth)        .trackBackgroundColor(this.trackBackgroundColor)
      DataPanel({ values: this.values, max: this.max, type: DataPanelType.Line })        .width(300)        .height(20)        .closeEffect(this.closeEffect)        .valueColors(this.valueColors)        .trackShadow(this.trackShadow)        .strokeWidth(this.strokeWidth)        .trackBackgroundColor(this.trackBackgroundColor)
      DataPanel({ values:this.values, max: this.max })        .width('100%')        .height(300)        .contentModifier(new DataPanelBuilder()) //定制DataPanel内容区的方法
      Row({space:10}){
        Button('修改数据').onClick(()=>{          this.values=[]          for (let index = 0; index < 6; index++) {            this.values.push(Math.random()*100)          }        })      }    }  }}@Builderfunction buildDataPanel(config: DataPanelConfiguration) {  Column() {    Row({space:10}) {      ForEach(config.values, (item: number, index: number) => {        ChildItem({ item: item, index: index, max: config.maxValue })      }, (item: string) => item)    }.alignItems(VerticalAlign.Bottom)
    Column() {      Line().width("100%").backgroundColor("#ff373737").margin({ bottom: 5 })    }.padding({ left: 20, right: 20 })
    Row() {      Text('Length=' + config.values.length + '    ').margin({ left: 10 }).align(Alignment.Start)      Text('Max=' + config.maxValue).margin({ left: 10 }).align(Alignment.Start)    }  }}@Componentstruct ChildItem {  @Prop item: number;  @Prop index: number;  @Prop max: number;  public color1: string = "#65ff00dd"  public color2: string = "#6500ff99"  public color3: string = "#65ffe600"  public color4: string = "#6595ff00"  public color5: string = "#65000dff"  public color6: string = "#650099ff"  public colorArray: Array<string> = [this.color1, this.color2, this.color3, this.color4, this.color5, this.color6]
  build() {    Column() {      Text(" " + this.item.toFixed(2))        .fontSize(17)      Rect()        .height(this.item * 300 / this.max)        .width(25)        .foregroundColor(this.colorArray[this.index])        .radius(5)        .align(Alignment.Start)
    }.justifyContent(FlexAlign.End)  }}class DataPanelBuilder implements ContentModifier<datapanelconfiguration> {  constructor() {  }  applyContent(): WrappedBuilder<[DataPanelConfiguration]> {    //将数据面板的 values 和 maxValue 传递给 自定义组件    return wrapBuilder(buildDataPanel)  }}</datapanelconfiguration></string></resourcecolor | lineargradient>