3D圆环图以三维形式表示每一数值相对于总数值的大小,其数据点在图表中绘制的单个值由3D圆环扇面为数据标记的图形表示。

效果案例

配置

基础属性

组件位置:包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

组件尺寸:包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高。再次单击进行解锁,解锁后宽高比不受限制。比例锁默认不锁定。

旋转:以组件的中心为中心点,进行旋转,单位为度(°)。手动输入角度值,控制组件的旋转角度;

  • 单击图标,控制组件左右翻转样式;
  • 单击图标,控制组件上下翻转样式。

透明:取值范围为0~100%。为0%时,组件隐藏;为100%时,组件完全显示。默认为100%。

组件属性

全局

全局中支持配置组件边距背景色相机设置、排序图例等样式。

边距
通过配置水平偏移与垂直偏移,来改变圆环图圆心所在的位置。水平偏移的值大于0时,圆心向右偏移,反之向左;垂直偏移的值大于0 时,圆心向下偏移,反之向右。

背景色
背景颜色的设置。

相机设置

配置项 说明
视角 通过旋转X设置饼图视角位置
视距 视角距离主体的距离,即距离中心原点的距离。圆环图的大小与视距成反比

排序
支持将数据中的值以数据返回顺序、从大到小、从小到大进行排序(图例的排序方式也会随之改变)

图例
在图例中可以调整图标尺寸、图标标识、系列名、占比值、真实值、布局以及设置图例的点击交互

配置项 说明
图标尺寸 图例图标的宽度和高度的配置
图标标识 可自定义设置图标的标识样式
数据项名称 配置数值项名称的字体、字号、颜色、粗细和字符数(内容溢出时截断,并在末尾显示省略号,为空时不限制其字符数)
占比值 可配置占比值小数位数、间距(左间距)和样式跟随(跟随数据项名称的样式),当样式跟随关闭后可单独配置其字体、字号、颜色、粗细和字符数(内容溢出时截断,并在末尾显示省略号,为空时不限制其字符数)
真实值 可配置真实值小数位数、间距(左间距)和样式跟随(跟随数据项名称的样式),当样式跟随关闭后可单独配置其字体、字号、颜色、粗细和字符数(内容溢出时截断,并在末尾显示省略号,为空时不限制其字符数)
布局 可配置其布局方式、图例与图例之间的间隔、布局朝向、以及相对于图表的位置
点击交互 预览时可点击激活/关闭图例更改显示的系列

布局方式:单侧-两侧:

布局朝向:垂直-水平:

点击交互:

饼图属性

饼图

配置项 说明
内外半径比 内外半径比与圆环的宽度成反比,当值为0时,3D圆环图为3D饼图
等高 开启即可设置圆环图数据块统一高度;关闭则需设置圆环图数据块最大高度和最小高度

等高:

当前值

配置项 说明
位置 通过配置水平偏移与垂直偏移,来改变当前值所在的位置。水平偏移的值大于0时,向右偏移,反之向左;垂直偏移的值大于0 时向下偏移,反之向右
间距 可调节值与文本的间距
系列名 可调整系列名文本的文字样式和偏移量
占比值 可调整占比数据的文字样式、小数位数和偏移量
真实值 可调整真实值数据的文字样式、小数位数和偏移量

系列

当图表数据存在多类型展示需求时,组件默认将数据划分成多个系列,用户可通过对各系列数据进行自定义数据映射,从而完成对每个系列配置相应样式。
数据系列

配置项 说明
映射 映射的字段名对应数据中的series系列字段,显示名是编辑页面中字段的变量名
颜色 改变指定系列的区域值颜色

映射规则:

  1. 字段名全为空时,所有系列配置进行循环;
  2. 若匹配到字段名则对应的系列样式更改,其余为空的字段名的系列,循环字段名为空的配置;
  3. 字段名有空时,字段名匹配不到的所属样式不参与循环;
  4. 若字段名全部填满,则将所有系列配置放入循环;
  5. 当字段名相同且能匹配到时,后面的会覆盖前面的;

轮播动画

通过「开启」控制是否启用轮播动画。
当前值

配置项 说明
高度增长 支持配置选中数据块的动画增长高度
透明度 支持配置选中数据块的透明度
间隔时长 轮播间隔时长

交互方式
提供三种交互方式:点击、悬停或无。当点击或悬停对应数据块时,将会停止轮播,且仅显示当前数据信息。

数据

组件数据格式

字段 说明
item 必填,3D圆环图的系列名
itemTitle 选填,3D圆环图系列的显示名,不填时默认为item字段,映射中的显示名可覆盖数据中的显示名。
value 必填,3D圆环图的值

静态数据-JSON数据案例

[
    {
        "item": "系列一",
    "itemTitle":"",
        "value": 800
    }
]

交互

支持配置鼠标点击事件:
当点击圆环时,触发交互事件:设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

支持配置当前数据切换事件:
当轮播开启数据切换时触发交互事件:设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

例如:

制作过程:
1.添加3D圆环图
添加3D圆环图,根据实际业务设置数据以及图表样式
2.添加标题和翻盘器
设置翻牌器的样式
3.添加交互事件

将3D圆环图的字段item传入标题中,使得标题在当前数据切换时获得其对应得value;同理,将3D圆环图的字段value传入标题中,使得翻牌器在当前数据切换时获得其对应得value。

作者:倪  创建时间:2023-06-05 10:28
最后编辑:倪  更新时间:2025-02-07 17:25