1# DataPanel 2 3数据面板组件，用于将多个数据占比情况使用占比图进行展示。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) 20 21**参数:** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| ----------------- | -------- | ----- | -------- | 25| values | number[] | 是 | 数据值列表，最大支持9个数据。 | 26| max | number | 否 | - max大于0，表示数据的最大值。<br/>- max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 | 27| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型。<br/>默认值：DataPanelType.Circle | 28 29 30## DataPanelType枚举说明 31| 名称 | 描述 | 32| -------| ------------ | 33| Line | 线型数据面板。 | 34| Circle | 环形数据面板。 | 35 36 37## 示例 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct DataPanelExample { 44 public values1: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] 45 46 build() { 47 Column({ space: 5 }) { 48 Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' }) 49 DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200) 50 51 Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' }) 52 DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10) 53 }.width('100%').margin({ top: 5 }) 54 } 55} 56``` 57 58 59
