如何实现类似运动健康渐变色热量环效果

@Entry 
@Component 
struct LinearGradientDataPanelExample { 
  public values1: number[] = [80]; 
  color1: LinearGradient = new LinearGradient([{ color: "#F22424", offset: 0 }, { color: "#FF9933", offset: 1 }]); 
  color2: LinearGradient = new LinearGradient([{ color: "#FFAE0D", offset: 0 }, { color: "#FFD814", offset: 1 }]); 
  color3: LinearGradient = new LinearGradient([{ color: "#266EFF", offset: 0 }, { color: "#4DC3FF", offset: 1 }]); 
  @State bgColor: string = '#08182431'; 
  @State offsetX: number = 15; 
  @State offsetY: number = 15; 
  @State radius: number = 5; 
  @State colorArray1: Array<LinearGradient | ResourceColor> = [this.color1]; 
  @State colorArray2: Array<LinearGradient | ResourceColor> = [this.color2]; 
  @State colorArray3: Array<LinearGradient | ResourceColor> = [this.color3]; 
 
  build() { 
    Column({ space: 5 }) { 
      Stack() { 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(400) 
          .height(400) 
          .valueColors(this.colorArray1) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray1, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(300) 
          .height(300) 
          .valueColors(this.colorArray2) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray2, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(200) 
          .height(200) 
          .valueColors(this.colorArray3) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray3, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
      } 
      .rotate({ 
        x: 0, 
        y: 0, 
        z: 1, 
        centerX: '50%', 
        centerY: '50%', 
        angle: 215 
      }) 
    }.width('100%').margin({ top: 5 }) 
  } 
}