动画图表

进度条

  进度条分为线形和圆形。线形进度条用于显示加载进度、文件传输进度、任务执行进度等；圆形进度条适用于仪表盘、数据可视化、任务完成度展示等场景。方便用户更直观地了解当前进度。

应用场景

1. 文件下载：在下载文件时，线形进度条可以显示文件的下载进度，让用户了解下载任务的完成情况。
2. 视频播放：在视频播放器中，线形进度条可以显示视频的播放进度，让用户了解视频的播放位置。
3. 数据处理：在处理数据时，线形进度条可以显示数据处理的进度，让用户了解数据处理任务的完成情况。
4. 仪表盘：在仪表盘中，圆形进度条可以用于显示各种指标的进度，例如速度、温度、湿度、心率、血压、血氧等。与传统的进度条相比，圆形进度条可以提供更好的视觉效果和用户体验。

常用属性

进度条属性

属性	作用	默认值
进度条类型	设置进度条的类型，可选值有 圆形、线形	圆形
进度数值	设置进度条的数值，支持 变量绑定（需要绑定double类型的变量）
起始值	设置进度条的起始值	0
终点值	设置进度条的终点值	100
背景颜色	设置进度条的背景颜色	#FFE0E0E0
进度条颜色	设置进度条的颜色	#FF42A5F5

圆形进度条

属性	作用	默认值
背景渐变	设置圆形进度条的背景渐变，参考容器
进度条渐变	设置圆形进度条的颜色渐变，参考容器
直径	设置圆形进度条的直径大小
笔画宽度	设置圆形进度条的宽度
开口方向	设置圆形进度条的开口方向	向下
开口大小	设置圆形进度条的开口大小	0
圆形线帽	设置圆形进度条两端是否为圆形	true
进度条满时线帽重合	当开启圆形线帽后，该属性有效，设置圆形进度条满时线帽是否重合	true
刻度	设置圆形进度条是否显示刻度，存在长刻度和短刻度，刻度属性如下	false
指针	设置圆形进度条是否显示指针，指针属性如下	false
中间文本	设置圆形进度条中间显示的文本，支持 变量绑定	true
圆环顶部组件	设置圆形进度条顶部是否显示组件，适用于顶部展示logo图片，参考容器	false

线形进度条

属性	作用	默认值
宽	设置线形进度条的宽度	200
高	设置线形进度条的高度	10
多段进度值	开启后，用于设置在不同区间内进度条的颜色，	0

折线图

  折线图通过动态波形显示数据变化趋势，比较不同类别间的差异，揭示模式和趋势，适用于技术监控和分析。

应用场景

1. 经济分析：在经济分析中，折线图可以用于显示GDP、失业率、通货膨胀率等经济数据的变化趋势，帮助人们了解经济发展情况。
2. 医疗保健：在医疗保健中，折线图可以用于显示心率、血压、血糖等生理数据的变化趋势，帮助医生了解患者的健康状况。
3. 体育运动：在体育运动中，折线图可以用于显示速度、距离、心率等运动数据的变化趋势，帮助运动员了解自己的训练情况。
4. 电商分析：在电商分析中，折线图可以用于显示销售额、流量、转化率等电商数据的变化趋势，帮助电商企业了解经营情况。

常用属性

折线属性

属性	作用	默认值
Y轴数据	设置折线图的Y轴数据列表，支持变量绑定
X轴数据	设置折线图的X轴数据列表，支持变量绑定
线条颜色	设置折线图的线条颜色	#FF000000
线条宽度	设置折线图的线条宽度	2
光滑拐点	设置折线图的拐点是否光滑	true
显示点	设置折线图是否显示点	false
折线下方填充	设置折线图折线下方是否填充	true
填充颜色	当开启 折线下方填充 后，该属性有效，设置折线图填充颜色	#FFFFE082
填充渐变	当开启 折线下方填充 后，该属性有效，设置折线图填充颜色渐变，参考容器
添加折线	用于在折线图中添加新的折线

图表属性

属性	作用	默认值
宽	设置折线图的宽度	300
高	设置折线图的高度	350
背景颜色	设置折线图的背景颜色
显示网格	设置折线图是否显示网格	false
显示边框	设置折线图是否显示边框，边框属性如下	false
触摸提示数据	设置折线图触摸是否显示数据	false
显示X轴标题	设置折线图是否显示X轴标题，标题属性如下	false
显示Y轴标题	设置折线图是否显示Y轴标题，标题属性如下	false
配置x轴最小值	设置折线图x轴的最小值	false
配置x轴最大值	设置折线图x轴的最大值	false
配置y轴最小值	设置折线图y轴的最小值	false
配置y轴最大值	设置折线图y轴的最大值	false

饼图

  饼图是一种展示数据比例和构成的圆形统计图表，通过不同颜色的扇形区域直观地反映各部分占总体的百分比。

应用场景

1. 市场份额分析：在商业分析中，饼图可以用于显示不同公司或产品在市场中的份额占比，帮助分析市场竞争状况。
2. 预算分配：在财务分析中，饼图可以用于展示预算在不同项目或部门中的分配比例，便于理解和优化预算使用。
3. 人口统计：在社会研究中，饼图可以用于显示不同年龄段、性别、职业等人口特征的分布比例。
4. 投票结果：在选举或调查中，饼图可以用于展示各个选项的得票比例，直观地反映投票结果。
5. 销售分析：在销售报告中，饼图可以用于展示不同产品线或销售渠道的销售额占比，帮助分析销售业绩。
6. 资源配置：在企业或项目管理中，饼图可以用于显示资源在不同任务或项目中的配置比例，有助于资源优化。

常用属性

图表属性

属性	作用	默认值
宽	设置饼图的宽度	100
高	设置饼图的高度	100
中心空白区域颜色	设置饼图的中心空白区域颜色
中心空白区域半径	设置饼图的中心空白区域半径	0
扇形区域之间的间距	设置饼图扇形区域之间的间距	2
开始角度偏移	设置饼图的开始角度偏移	0
显示边框	设置饼图是否显示边框，边框属性如下	false
触摸提示数据	设置饼图触摸是否显示数据	false
添加饼图区域	用于在饼图中添加新的饼图区域

饼图区域属性

属性	作用	默认值
扇形数值	设置当前饼图区域的数值，自动计算百分比	10
扇形半径	设置当前饼图区域的扇形半径	10
扇形颜色	设置当前饼图区域的扇形颜色	#FF000000
显示标题	设置当前饼图区域的标题文本	false

柱状图

  柱状图是一种用高度不同的柱子来展示数据大小和分布的统计图表，适用于比较不同类别之间的数据量和趋势。

应用场景

1. 销售分析：在销售报告中，柱状图可以用于展示不同产品或地区的销售额，帮助分析销售业绩。
2. 财务报告：在财务报告中，柱状图可以用于展示不同时间段内的收入、支出或利润，便于理解和分析财务状况。
3. 人口统计：在社会研究中，柱状图可以用于显示不同年龄段、性别、职业等人口特征的分布情况。
4. 健康数据：在健康报告中，柱状图可以用于展示不同疾病或健康状况的发病率，帮助分析和理解健康趋势。
5. 教育数据：在教育报告中，柱状图可以用于展示不同学校或地区的教育水平、升学率等数据。
6. 环境监测：在环境报告中，柱状图可以用于展示不同地区或时间段的污染程度、资源消耗等数据。

常用属性

折线属性

属性	作用	默认值
Y轴数据	设置柱状图的Y轴数据列表，支持变量绑定
线条颜色	设置柱状图的线条颜色	#FF000000
线条宽度	设置柱状图的线条宽度	2
显示点	设置柱状图是否显示点	false

图表属性

属性	作用	默认值
宽	设置柱状图的宽度	300
高	设置柱状图的高度	350
背景颜色	设置柱状图的背景颜色
显示网格	设置柱状图是否显示网格	false
显示边框	设置柱状图是否显示边框，边框属性如下	false
触摸提示数据	设置折线图触摸是否显示数据	false
显示X轴标题	设置折线图是否显示X轴标题，标题属性如下	false
显示Y轴标题	设置折线图是否显示Y轴标题，标题属性如下	false
配置y轴最小值	设置柱状图y轴的最小值	false
配置y轴最大值	设置柱状图y轴的最大值	false

表格

  表格是一种用行和列组织数据的结构，用于清晰地展示和比较信息，便于阅读和分析。

应用场景

1. 数据报告：在商业、科学或学术报告中，表格可以用来展示统计数据、实验结果或调查数据，以便于分析和比较。
2. 财务记录：在财务管理和会计中，表格用于记录收入、支出、资产负债等信息，帮助进行财务分析和预算规划。
3. 产品目录：在电商网站或产品手册中，表格可以用来展示产品的规格、价格、可用性等详细信息，便于用户比较和选择。
4. 时间表：在日程安排、课程表或交通时刻表中，表格用于展示时间与活动、课程或班次之间的关系，帮助用户合理安排时间。
5. 统计分析：在数据分析中，表格可以用来展示原始数据、汇总数据或统计分析结果，支持数据挖掘和决策制定。
6. 成绩单：在教育领域，表格用于展示学生的考试成绩、学分或评级，便于教师、学生和家长了解学习进展。
7. 技术规格：在技术文档或产品说明中，表格可以用来详细列出设备、软件或组件的技术规格和参数。

常用属性

表格属性

属性	作用	默认值
列数	设置表格的列数	3
行数	设置表格的行数	5
宽	设置表格的宽度
高	设置表格的高度
最大行高	设置表格的最大行高
最小行高	设置表格的最小行高
表头行高	设置表格的表头行高
列间距	设置表格的列间距

样式属性

属性	作用	默认值
表头颜色	设置表格的表头颜色	#FF4B39EF
行颜色	设置表格的行颜色	#FFE0E3E7
交替行颜色	设置表格的交替行颜色	#FF39D2C0
圆角	设置表格的圆角，参考容器

内边框属性

设置表格内边框的属性，参考容器。

外边框属性

设置表格外边框的属性，参考容器。

雷达

  雷达动画在蓝牙扫描中发挥重要作用，通过动态展示扫描过程和结果，有效提升用户体验，增强界面的科技感和信息可视化能力。

水波纹

  水波纹动画通常给人一种动态和扩散的感觉，适合用来表示信号的传播或扫描的范围。在蓝牙扫描中，这个动画可以实时显示扫描的进度和覆盖范围，让用户直观地看到扫描的过程。

翻转卡片

 将信息以卡片的形式呈现，每张卡片包含一个主题或功能模块，适用于信息量大且需要清晰区分内容的场景。

线形扫描

Rive动画

3D

3D文本