饼图
组件说明
饼图显示一个数据系列中各项的大小与各项总和的比例，可设置不同数据的展示颜色来区分数据之 前的占比差别。
案例效果
*案例效果
数据绑定
在数据Tab页中可以设置组建的数据来源为数据集市、数据库表或静态数据
基本饼图的数据集市
| 配置项 | 说明 | |
|---|---|---|
| 维度 | 只能拖入维度下的文件，拖入的文件内的字段将作为图表的图例进行展示 | |
| 展示名称 | 可自定义维度字段显示的名称 | |
| 空值处理 | 当维度数据为空时，可选择空数据显示的样式 | |
| 排列方式 | 可根据指定维度选择降序或升序排列 | |
| 度量 | 只能拖入度量下的文件，拖入的文件内的数据会作为饼图的数据进行展示，每个数据占总数据的比例决定其在饼图中的占比大小 | |
| 展示名称 | 可自定义度量字 段显示的名称 | |
| 聚合方式 | 数据聚合的方式，可选择求和、平均值等 | |
| 数据格式化 | 默认 | 数据单位：可给数据添加单位 示例：为所输入样式的最终效果 |
| 数值 | 小数位：可选择数据保留小数点后几位数使用千分位：即从个位数起,每三位数之间加一个逗号隔开 | |
| 货币 | 前缀：在数据前面加上前缀 | |
| 百分比 | 除以100：将数据除以100 | |
| 排列方式 | 可根据指定度量选择降序或升序排列 | |
| 图例 | 只能拖入维度下的文件，文件内的字段数据将作为折线上的数据展示 | |
| 数据筛选 | 设置筛选条件 | 直接对数据进行筛选，可选择AND（并且）和OR（或者）为各个筛选条件的关系。添加规则和分组后筛选字段为文档中的字段，关系条件可选择“=”“>”等关系符号，后面跟上自己想要的筛选数据 |
| 设置聚合筛选条件 | 数据聚合后进行筛选，可选择AND（并且）和OR（或者）为各个筛选条件的关系。添加规则或分组后筛选字段为维度和度量中的字段，关系条件可选择“=”“>”等关系符号，后面跟上自己想要的筛选数据 | |
| 数据缓存 | 数据缓存的时间，可选择不缓存、一小时和七小时 | |
| 定时刷新 | 数据定时更新的时间，可自定义选择定时更新的时间数据并选择时、分、秒等时间单位 | |
| 结果展示 | 可选择展示的数据数量 | |
| 更新 | 点击后立即更新数据 | |
| 调试 | 查看图表配置后执行的SQL语句和格式化后的数据 |
案例：展示不同「学院」的「费用金额」占总金额的比例：
*不同学院使用费用金额案例
饼图的静态数据
可以通过设置表格数据的方式来直接绘制图表，展开「数据来源」下拉框后选择「静态数据」，再点击「编辑表格数据」即可通过表格数据绘制饼图，编辑表格数据时，右侧图表会实时展示数据效果：
* 静态数据设置效果演示
图表样式
在样式中可以设置组件的「饼图属性」、「组件属性」、「标题属性」、「图例属性」、「背景和边框」、「图表配色」、「Tooltip样式设置」
饼图属性
| 配置项 | 说明 |
|---|---|
| 扇形最小角度 | 当某个数据在整个数据中占比很小，这时我们可选择将这个数据设为扇形中最小角度，让其更容易观察，度数可自己 |
| 合并小数值 | 开启后会将所有小数据合并为一个扇形 |
| 小数据项 | 选择占比为 X%以下的数据为小数据，X可自定义 |
* 饼图属性功能演示
饼图类型
| 配置项 | 说明 |
|---|---|
| 环状 | 开启后会将饼图切换成环形图 |
| 南丁格尔玫瑰图 | 开启后会将饼图切换成玫瑰样式，花瓣的大小根据的是饼图中数据的占比大小 |
*饼图类型功能演示
标签设置
| 配置项 | 说明 |
|---|---|
| 标签显示 | 开启可显示设置标签样式的功能 |
| 标签文字颜色 | 标签的文字颜色，支持修改 |
| 标签文字大小 | 标签文字的大小，支持修改 |
| 标签配置 | 标签位于图形的位置，可选择内侧、外侧或中心 |
| 标签类型 | 标签显示的内容，可选择维度、值、或维度+值 |
*标签设置演示
边宽设置
| 配置项 | 说明 |
|---|---|
| 边宽圆角设置 | 每个扇形的圆角边与直线边交界处的弧度 |
| 边宽距离设置 | 饼图中每个扇形之间的间距，可自定义设置 |
| 边宽间距颜色 | 每个扇形之间的间距的颜色，支持修改 |
*边宽设置演示
*边宽设置样式
组件属性
| 配置项 | 说明 |
|---|---|
| 组件名称 | 该组件的名称 |
| 组件实际宽度 | 该组件当前的宽度，默认为400 |
| 组件实际高度 | 该组件当前的高度，默认为250 |
| X轴位置 | 表示当前图表距离画布左侧的距离 |
| Y轴位置 | 表示当前图表距离画布顶部的距离 |
*组件属性说明
标题属性
| 配置项 | 说明 |
|---|---|
| 标题 | 输入该图表的标题，显示在图表的上方 |
| 启用标题 | 开启后可显示所输入的标题，并可开启设置标题其他样式的功能 |
| 标题字号 | 该图标标题的字体大小，支持修改 |
| 标题粗细 | 该标题字体的粗细，支持修改 |
| 标题字体 | 该标题字体样式，可选择宋体或黑体等 |
| 标题颜色 | 该标题字体的颜色，支持修改 |
| 对齐方式 | 可选择该标题的对齐方式，左对齐、右对齐或居中对齐 |
| 标题行高 | 该标题所在整个标题部分的垂直位置，标题行高应与标题高度一致，行高支持修改 |
| 标题高度 | 整个标题部分的高度，支持自定义修改 |
| 标题内边距 | 标题的距离边框的距离，默认为空，单位为px，依次为上、右、下、左，可自定义修改 |
| 图表简介 | 输入框，可输入对该图表的介绍 |
*标题设置演示
图例属性
| 配置项 | 说明 |
|---|---|
| 显示图例 | 开启后可显示图例的样式设置 |
| 字体 | 图例的字体样式，可选择宋体或黑体等 |
| 字体字号 | 图例字体的文字大小，支持修改 |
| 字体颜色 | 图例的字体颜色，支持修改 |
| 图例排列方向 | 图例文字的排列方向，可选择水平方向或垂直方向 |
| 图例水平位置 | 图例文字的水平位置，可选择图例位置为左侧对齐、右侧对齐或居中对齐 |
| 图例竖直位置 | 图例文字的竖直位置，可选择图例位置为顶部对齐、竖直居中或底部对齐 |
- 图例属性设置演示
背景和边框
| 配置项 | 说明 |
|---|---|
| 背景和边框 | 开启后可显示标题背景和组件背景的设置功能 |
标题背景设置
| 配置项 | 说明 |
|---|---|
| 背景颜色 | 标题背景的颜色，支持修改 |
| 背景图片 | 标题背景照片，支持自定义选择 |
组件背景设置
| 配置项 | 说明 |
|---|---|
| 背景颜色 | 组件背景的颜色，支持修改 |
| 背景图片 | 组件的背景照片，支持自定义选择 |
- 标题背景和组件背景设置演示
标题底部边框设置
| 配置项 | 说明 |
|---|---|
| 底部边框线 | 标题底部边框的样式，可选择直线、虚线、点线或双实线 |
| 底部边框宽度 | 标题底部的边框宽度，可自定义修改 |
| 底部边框颜色 | 标题底部的边框颜色，可自定义修改 |
组件边框设置
| 配置项 | 说明 |
|---|---|
| 边框线类型 | 组件边框的样式，可选择直线、虚线、点线或双实线 |
| 边框宽度 | 组件边框的宽度，支持修改 |
| 边框颜色 | 组件边框的颜色，支持修改 |
| 圆角 | 组件边框四个角的弧度，支持修改 |
- 标题底部边框与组件边框
- 标题底部边框与组件边框设置演示
组件阴影设置
| 配置项 | 说明 |
|---|---|
| 阴影宽度 | 组件阴影的宽度，默认为空，支持修改 |
| 阴影颜色 | 组件阴影的宽度，支持修改 |
| 阴影颜色X轴偏移 | 组件阴影颜色向X轴方向偏移距离，可修改 |
| 阴影颜色Y轴偏移 | 组件阴影颜色向Y轴方向偏移距离，可修改 |
- 组件阴影设置演示
图表配色
| 配置项 | 说明 |
|---|---|
| 图标渐变色 | 可为每个图例添加渐变色样式，增减图例时也可增加图例渐变色的设置数量 |
| 渐变色样式 | 每个渐变色样式对应每个图例，支持修改图例的渐变色以及渐变色角度和渐变色起始值、终止值 |
- 图表配色样式和配置
Tooltip样式配置
**说明：**光标所在的的区域即可弹出提示框，提示该区域的数据情况
| 配置项 | 说明 |
|---|---|
| tooltip背景颜色 | tooltip提示框的背景颜色 |
| tooltip边框颜色 | tooltip提示框的边框颜色 |
| tooltip边框宽 | tooltip提示框的边框宽度 |
| tooltip内边距 | tooltip提示框内的提示内容距离边框的距离 |
| tooltip文字的颜色 | tooltip提示框内文字的颜色 |
| tooltip字体大小 | tooltip提示框内文字的大小 |
- tooltip效果演示
- tooltip样式设置