多色玫瑰图

文档基于多色玫瑰图v1.4.25版本

组件说明

多色玫瑰图是基础饼图的展现形式之一。通过扇形样式展示数据系列中各项的大小与各项总和的比例，通过多系列数据配置的方式，展现数据变化。

效果案例

*多色玫瑰图效果案例

一、样式

在样式中可以设置组件的基本属性、全局、饼图属性、系列。

1、基本属性

位置尺寸

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

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

*尺寸调整不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、全局

在全局中支持配置组件边距、外间距、图例等样式。

边距

基本柱状图表距离整个组件四边（上、下、左、右）的边距

*边距样式说明

数值标签

饼图数据值的标签

配置项	说明
偏移距离	数值标签与图标的距离
线长	数值标签的线段长度
布局	不同数据指标的排布状态，可选择水平或垂直
偏移	可调节数值标签的水平、垂直偏移
类目	数据系列的类目值，可调节其文本样式、文本溢出
占比值	数据系列的占比值，可调节其文本样式和保留小数位数
真实值	数据系列的真实值，可调节其文本样式

*数值标签说明

图例

配置项	说明
顺序	图例的排列顺序，可按数据传入顺序返回、从小到大返回、从大到小返回
图标尺寸	图例的宽高尺寸
间距	图文的间距
类目	可控制类目的显隐及相关文本样式配置
占比值	可控制占比值的显隐及相关文本样式配置
真实值	可控制真实数值的显隐及相关文本样式配置
布局	图例的布局方式，支持修改行列数、间距、九宫格排布、偏移量

*图例配置项说明

3、饼图属性

饼图

配置项	说明
图形	支持调整玫瑰图的内外半径大小、圆角大小、间距

*多色玫瑰图配置项说明

4、系列

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

其中，数据系列操作支持：

：增加一个系列数据

：删除一个系列数据

：调整系列的显示格式（纵向展示、横向展示）

顺序

支持按图例数据进行排序，包括数据返回顺序、从大到小、从小到大。

数据系列

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

*系列 - 数据映射字段名和显示名

5、提示框

悬停触发
鼠标悬浮到对应系列上时，显示提示框。

提示框

字段	说明
提示框样式	柱状图的提示框，支持调整提示框的背景、尺寸、边距和偏移量
行高	每个数据值间的行高
框内数据	提示框内的数据，系列值和百分比
背景	可以上传图片设置提示框的背景

二、数据

组件数据格式

字段	说明
s	文本
y	值

*组件数据格式说明

JSON数据案例

[
	{
		"s": "系列一",
		"y": 67
	},
	{
		"s": "系列二",
		"y": 34
	},
	{
		"s": "系列三",
		"y": 18
	},
	{
		"s": "系列四",
		"y": 9
	},
	{
		"s": "系列五",
		"y": 6
	}
]

数据配置项说明

配置项	说明
数据源	数据源类型、数据源选择等
数据过滤器	勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明
数据响应结果	展示数据请求的响应结果
自动更新	选中后可以设置数据请求时间间隔

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

当前组件可通过载入动画、回调参数、自定义事件进行交互配置。

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

配置项	说明
渐隐渐显	渐显渐隐动效
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms

回调参数

回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0