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

@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 }) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.