HarmonyOS鸿蒙Next中饼形图刷新

HarmonyOS鸿蒙Next中饼形图刷新

咨询描述： 如何实时刷新饼形图数据

以下为饼形图代码CustomPieChart：

@Component
export struct CustomPieChart {
  // 饼图数据
  @State picChartElements: PicChartElement[] = []
  // 圆半径
  @State circle_radius: number = 50
  // 单位
  @State unit: string = ""

  // 获取上下文
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  aboutToAppear() {
    let total = 0
    // 统计总数量
    this.picChartElements.forEach(value => {
      total += value.quantity
    })

    // 初始化 弧线的终止弧度
    let lastEndAngle = -0.5 * Math.PI
    // 封装饼图数据
    this.picChartElements.forEach(value => {
      // 占用百分比
      let percent = value.quantity / total
      // 四舍五入，获取整数
      value.percent = Math.round(percent * 100)
      // 初始化终止弧度为 弧线的起始弧度
      value.beginAngle = lastEndAngle
      // 计算弧线的终止弧度
      value.endAngle = (percent * 2 * Math.PI) + lastEndAngle
      // 赋值终止弧度为变量，作为下次的起始弧度
      lastEndAngle = value.endAngle
      // 返回封装好的对象
      return value
    })
  }

  build() {
    Column() {
      Canvas(this.context)
        // 高度为半径2倍
        .height(this.circle_radius * 2)
        // 纵横比，宽度和高度一样
        .aspectRatio(1)
        // 画布组件的事件回调，可以在此时进行绘制
        .onReady(() => {
          this.picChartElements.forEach(item => {
            // 创建一个新的控制路径
            this.context.beginPath()
            // 路径从当前点移动到指定点
            this.context.moveTo(this.circle_radius, this.circle_radius)
            // 绘制弧线路径(弧线圆心的x坐标值,弧线圆心的y坐标值,弧线的圆半径,弧线的起始弧度,弧线的终止弧度)
            this.context.arc(this.circle_radius, this.circle_radius, this.circle_radius, item.beginAngle, item.endAngle)
            // 指定绘制的填充色
            this.context.fillStyle = item.color
            // 对封闭路径进行填充
            this.context.fill()
          })
        })
    }
    .height('100%')
  }
}

export class PicChartElement {
  quantity: number // 数量
  percent: number = 0 // 百分比
  beginAngle: number = 0 // 弧线的起始弧度
  endAngle: number = 0 // 弧线的终止弧度
  color: string // 颜色

  constructor(quantity: number, color: string) {
    this.quantity = quantity
    this.color = color
  }
}

在另一个页面调用饼形图DVRVideoSettingPage：
@Component
struct DVRVideoSettingPage {
  @State mCameraMenuCardInfoLifeTimeTotal: number = 10
  @State mCameraMenuCardInfoLifeTime: number = 1

  // 饼图数据
  @State picChartElements2: PicChartElement[] = [
    new PicChartElement(this.mCameraMenuCardInfoLifeTimeTotal, '#32B16C'),
    new PicChartElement(this.mCameraMenuCardInfoLifeTime, '#474EE7')
  ]

  build {
    CustomPieChart({picChartElements: this.picChartElements2, circle_radius: 54, unit: ''})
  }

//获取存储卡信息
async deviceCameraSettingValue() {
  let commandURL: string =
    ConnectDVRWiFiUtils.getDeviceCgiPathURI(DVRCommandURI.CameraMenuCardInfo)

  await MyAxiosUtil.makeRequest(getContext(this), commandURL, AxiosRequestMethod.GET, {}, AxiosBaseURLType.SPECIAL,
    (result) => {
      if (result != null) {
        if (result.includes("0\\nOK\\n")) {
          const lines = result.split('\\n');
          for (let i = 0; i < lines.length; i++) {
            if(lines[i].startsWith(DVRCommandURI.CameraMenuCardInfoLifeTimeTotal)) {
              // 保留一位小数
              this.mCameraMenuCardInfoLifeTimeTotalGB = Number.parseFloat(lines[i].split(DVRCommandURI.CameraMenuCardInfoLifeTimeTotal)[1]).toFixed(1) + 'GB'
              this.mCameraMenuCardInfoLifeTimeTotal = Number.parseFloat(lines[i].split(DVRCommandURI.CameraMenuCardInfoLifeTimeTotal)[1])
            } else if(lines[i].startsWith(DVRCommandURI.CameraMenuCardInfoRemainLifeTime)) {
              // 保留一位小数
              this.mCameraMenuCardInfoLifeTimeGB = Number.parseFloat(lines[i].split(DVRCommandURI.CameraMenuCardInfoRemainLifeTime)[1]).toFixed(1) + 'GB'
              this.mCameraMenuCardInfoLifeTime = Number.parseFloat(lines[i].split(DVRCommandURI.CameraMenuCardInfoRemainLifeTime)[1])
            }
          }
        } else {
          ToastUtils.showToast($r('app.string.toast_command_failed'))
        }
      }
    }, (error) => {
      ToastUtils.showToast($r('app.string.toast_command_failed'))
    })
}

mCameraMenuCardInfoLifeTimeTotal与mCameraMenuCardInfoLifeTime是可变化的，饼形图如何根据这两个值的变化而变化