百分比环图是饼图的一种,支持通过极坐标来确定图表的大小,支持图表外部的标签展示,支持真实数值和百分比值的切换,支持自定义图形样式和多系列数据配置,能够清晰智能地展示各类别的占比情况。本文介绍百分比环图各配置项的含义。
![编辑百分比环图](https://qcloudimg.tencent-cloud.cn/image/document/6eac7ccea3a0105fa633b3e08cbbe454.png)
n编辑组件时,先使用鼠标单击选中组件。
![编辑百分比环图](https://qcloudimg.tencent-cloud.cn/image/document/6eac7ccea3a0105fa633b3e08cbbe454.png)
设置属性
位置大小
大小
设置组件的宽与高,单位为 px。
单击![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/cf210784577aad561c6b800ba4894469.png)
图标,可锁定组件的宽高比,等比例调整组件的宽高。
![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/cf210784577aad561c6b800ba4894469.png)
再次单击图标,可解锁组件的宽高比,调整宽高将不受等比例限制。
位置
设置组件的坐标位置,单位为 px。
横坐标为组件左上角与画布左边界的距离。
纵坐标为组件左上角与画布上边界的距离。
旋转
手动输入角度值,可调整组件的旋转角度。
拖动![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/966b103c03a882e52c98e13fe6f0f1ed.png)
图标内的小圆点,可调整组件的旋转角度。
![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/966b103c03a882e52c98e13fe6f0f1ed.png)
单击![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/1f55f3f78fc144a9b17e52269adb8d2d.png)
图标,可设置组件左右或上下翻转样式。
![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/1f55f3f78fc144a9b17e52269adb8d2d.png)
图表
饼图设置
用于设置环图的样式。
![环图设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/aba4fee402a35bae6199532006eb144f.png)
![环图设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/aba4fee402a35bae6199532006eb144f.png)
饼图选项
内径:设置环图内侧半径的长度比例,可选值范围:[0-1]。
外径:设置环图外侧半径的长度比例,可选值范围:[0-1]。
弧圆角:设置环图的弧圆角值,可选值范围:[0-100]。
开始颜色:设置环图的开始颜色;当开启了渐变色时,此项为渐变色的开始颜色。
结束颜色:设置环图的结束颜色;当开启了渐变色时,此项为渐变色的结束颜色。
启用渐变:开启或关闭环图的渐变色。
底圈颜色:设置环图的底圈颜色。
底圈显示:设置环图的底圈是否显示。
底圈透明度:设置环图的底圈透明度。
![环图设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/74527c6f862d27582173a4a34bb6ffe5.png)
![环图设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/74527c6f862d27582173a4a34bb6ffe5.png)
中心文本
数字字体:设置标签文本的文字字体和字体大小。
数字颜色:设置标签文本的文字颜色。
显示精度:设置中心数字的小数精度。
显示百分号:显示或隐藏百分号。
字体字号:设置百分号的文字字体和字体大小。
文字颜色:设置百分号的文字颜色。
辅助
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/cc7d3d7809924156360cd6ca881949c0.png)
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/cc7d3d7809924156360cd6ca881949c0.png)
标题
标题字体
文本:设置环图的标题文字。
字体字号:设置标题的文字字体和字体大小。
文字颜色:设置标题的文字颜色。
文字样式:设置标题的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置标题的文字行高。
对齐方式:设置标题的文字对齐方式,可选项包括:左对齐、居中对齐、右对齐。
位置:设置标题显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。
间距:设置标题相对于图表和边界间的距离。
设置数据
数据源
自定义函数
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/1f31dc1e2c9a9526c617bc6ec4fede71.png)
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/1f31dc1e2c9a9526c617bc6ec4fede71.png)
自定义函数用来对数据源中的数据做处理,需要使用 JavaScript 代码。其中入参
data
是数据源中的数据,返回值需要与数据源中“静态数据”的数据格式保持一致。可用于过滤数据、聚合数据、格式化数据等。字段映射
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/930bc5c532437a6d82292f7ea47cc34b.png)
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/930bc5c532437a6d82292f7ea47cc34b.png)
将数据源中返回的业务字段一一映射为图表提供的默认字段,图表字段的具体意思可查看字段前的问号图标。字段映射成功后,将在状态栏中显示映射成功。
自动更新
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/b238b2ad55af14cdb92b26853a63610e.png)
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/b238b2ad55af14cdb92b26853a63610e.png)
自动更新用于设置组件定时更新数据,在选择动态数据源或开启自定义函数的情况下该选项才可以设置。当勾选自动更新选项并输入定时时长(单位为秒),系统将根据设定的时长轮询数据源,获取最新数据并更新到相应图表中。