diff --git a/en/application-dev/reference/arkui-ts/figures/LinearGradientDataPanel.PNG b/en/application-dev/reference/arkui-ts/figures/LinearGradientDataPanel.PNG new file mode 100644 index 0000000000000000000000000000000000000000..5dbe4fdeef5f231fd2145da2bbaa82b433458d6c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/LinearGradientDataPanel.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG b/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG index b360ca62d5d961ff107b2a703621123b3b48aa46..559a2370feae57233fb39cad218a8ca77241fed9 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG and b/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 41db34a3c7167bc08af84c54586af4981a265efc..3a56d0d8d44bc724a4290556f25d3366e5e7c339 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -24,7 +24,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description| | ----------------- | -------- | ----- | -------- | -| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. A value less than 0 evaluates to the value **0**. | +| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. A value less than 0 evaluates to the value **0**.| | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| | type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).
Default value: **DataPanelType.Circle**| @@ -46,20 +46,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type| Mandatory| Description| | ------------- | ------- | ---- | -------- | -| closeEffect | boolean | Yes| Whether to disable the rotation effect for the component.
Default value: **false**.| +| closeEffect | boolean | Yes| Whether to disable the rotation and shadow effects for the component.
Default value: **false**
**NOTE**
This attribute enables or disables the shadow effect only when **trackShadow** is not set.
The shadow effect enabled through this attribute is in the default style.| | valueColors10+ | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Yes| Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.| -| trackBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.| -| strokeWidth10+ | [Length](ts-types.md#Length) | Yes| Stroke width of the border.| -| trackShadow10+ | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style. If this attribute is not set, the shadow effect is disabled.| +| trackBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.
Default value: **'#081824'**| +| strokeWidth10+ | [Length](ts-types.md#Length) | Yes| Stroke width of the border.
Default value: **24**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
This attribute does not take effect when the data panel type is **DataPanelType.Line**.| +| trackShadow10+ | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style.
**NOTE**
If this attribute is set to **null**, the shadow effect is disabled.| ## DataPanelShadowOption10+ | Name | Type| Mandatory| Description| | ------------- | ------- | ---- | -------- | -| radius | number \| [Resource](ts-types.md#resource)| No| Shadow blur radius.
Default value: **5vp**| -| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | No| Array of shadow colors for data segments.
Default value: same as the value of **valueColors**.| -| offsetX | number \| [Resource](ts-types.md#resource)| No| Offset on the x-axis.
Default value: **5vp**| -| offsetY | number \| [Resource](ts-types.md#resource)| No| Offset on the y-axis.
Default value: **5vp**| +| radius | number \| [Resource](ts-types.md#resource)| No| Shadow blur radius.
Default value: **5**
Unit: vp
**NOTE**
A value less than or equal to 0 evaluates to the default value.| +| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | No| Array of shadow colors for data segments.
Default value: same as the value of **valueColors**
**NOTE**
If the number of the set shadow colors is less than that of the data segments, the number of the displayed shadow colors is the same as the former.
If the number of the set shadow colors is greater than that of the data segments, the number of the displayed shadow colors is the same as the latter.| +| offsetX | number \| [Resource](ts-types.md#resource)| No| Offset on the x-axis.
Default value: **5**
Unit: vp| +| offsetY | number \| [Resource](ts-types.md#resource)| No| Offset on the y-axis.
Default value: **5**
Unit: vp| ## LinearGradient10+ @@ -79,12 +79,14 @@ Describes the gradient color stop. | Name | Type| Mandatory| Description| | ------------- | ------- | ---- | -------- | | color | [ResourceColor](ts-types.md#resourcecolor) | Yes| Color value.| -| offset | [Length](ts-types.md#Length) | Yes| Gradient color stop (proportion value between 0 and 1).| +| offset | [Length](ts-types.md#Length) | Yes| Gradient color stop (proportion value between 0 and 1). A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -133,3 +135,48 @@ struct DataPanelExample { ``` ![dataPanel](figures/dataPanel.PNG) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct LinearGradientDataPanelExample { + public values1: number[] = [20, 20, 20, 20] + public color1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }]) + public color2: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }]) + public colorShadow1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }]) + public colorShadow2: LinearGradient = new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }]) + public colorShadow3: LinearGradient = new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }]) + public colorShadow4: LinearGradient = new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }]) + @State color3: string = '#00FF00' + @State color4: string = '#20FF0000' + @State bgColor: string = '#08182431' + @State offsetX: number = 15 + @State offsetY: number = 15 + @State radius: number = 5 + @State colorArray: Array = [this.color1, this.color2, this.color3, this.color4] + @State shadowColorArray: Array = [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4] + + build() { + Column({ space: 5 }) { + Text('LinearGradient').fontSize(9).fontColor(0xCCCCCC).textAlign(TextAlign.Start).width('100%').margin({ top: 20, left: 20}) + DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) + .width(300) + .height(300) + .valueColors(this.colorArray) + .trackShadow({ + radius: this.radius, + colors: this.shadowColorArray, + offsetX: this.offsetX, + offsetY: this.offsetY + }) + .strokeWidth(30) + .trackBackgroundColor(this.bgColor) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![LinearGradientDataPanel](figures/LinearGradientDataPanel.PNG)