更新时间:2022-04-26 GMT+08:00
分享

实心圆饼图

实心圆饼图是饼图的一种,通过实心圆的方式,将数据信息以实心圆饼图的形式清晰的展示在可视化应用上。

属性配置

在设计页面左侧从“全部组件 > 图表”中拖拽实心圆饼图至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

图1 实心圆饼图效果图
表1 配置参数说明

所属图标

参数名

说明

卡片图标

参考模板

系统提供了两种实心圆饼图模板,单击对应模板即可切换样式。

  • 默认:饼图中不带标签。
  • 带标签:饼图中带标签。

图表标题

图表标题配置。

展开“图表标题”后打开“显示图表标题”开关,可设置标题获取方式、文本样式。

图形-统一配置

数据系列

是否显示该系列数据。若不选中,会隐藏该组件中对应的系列数据。

南丁格尔图

是否使用南丁格尔图。

内半径

饼图内半径设置。

外半径

饼图外半径设置。

圆心横坐标

饼图圆心横坐标设置。

圆心纵坐标

饼图圆心纵坐标设置。

排布顺序

扇区可按顺时针或逆时针排布。

起始角度

扇区起始角度。

最小角度

扇区最小角度。

鼠标悬停

鼠标放在扇区时,该扇区是否放大显示。

普通扇区是否展现

普通扇区是否显示标签。

高亮扇区是否展现

高亮扇区是否显示标签。

扇区标签位置

标签显示位置,如内部、外部或中间。

标签视觉引导线是否展现

标签视觉引导线设置。

标签内容

标签内容是否显示系列名、数据名、数据值和百分比。

标签文字

标签字体颜色、大小、粗细和系列设置。

描边

设置图形描边线颜色及描边线宽。

设置背景

是否设置饼图背景

图形-数据系列

初始选中

数据项初始是否被选中。

颜色样式

数据系列的颜色样式,支持以下几种:

  • 单色:可设置正常颜色和高亮下颜色。
  • 渐变色:可设置渐变样式、渐变方向、起始颜色和结束颜色。
  • 纹理:设置为“纹理”时,需要上传纹理图片,支持设置所有数据项纹理重复或者不重复。

普通扇区是否展现

普通扇区是否显示标签。

高亮扇区是否展现

高亮扇区是否显示标签。

图例

显示图例

是否展示图例。

图例标记

包括以下设置:

  • 图例小图标形状,如圆形、矩形、菱形。
  • 图例列表布局朝向:图例列表布局的朝向,如水平、垂直。

图例宽高

图例的宽度高度。

图例间隔

图例之间的距离间隔。

字体

图例文本颜色、字体、大小设置。

图例文字内容来源于数据模型“dataValue”下“value”的“name”取值。

图例位置(左)

图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。

上间距

图例到饼图组件顶部距离占组件高度。

翻页按钮

翻页按钮的颜色。

翻页按钮不激活

翻页按钮不激活时的颜色。

提示

显示提示

打开“是否显示提示框”的开关,可设置提示框内容格式。

特征标记

提示框内容格式,如系列名、数据名、数据值、百分比。

图2 实心圆饼图提示框效果

数据配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    图3 配置数据
    在系统预置的静态数据基础上,添加如下标红字体代码,配置新增数据系列的数据。
    {
        "resCode": "0",
        "resMsg": "成功",
        "result": [
            {
                "dataValue": [
                    {
                        "name": "关键事件",
                        "value": [
                            {
                                "value": 635,
                                "name": "工程管理"
                            },
                            {
                                "value": 310,
                                "name": "社会环境"
                            },
                            {
                                "value": 110,
                                "name": "设施管理"
                            }
                        ]
                    }
                ]
            }
        ]
    }

分享:

    相关文档

    相关产品

close