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

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

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

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

看一下演示效果和源码：

@Entry
@ComponentV2
struct 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)
          }
        })
      }
    }
  }
}
@Builder
function 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)
    }
  }
}
@Component
struct 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)
  }
}