山海鲸可视化

玫瑰环图

1. 简介

玫瑰环图是使用圆弧的半径长短表示数据的大小（数量的多少）。

2. 效果展示

1.展示.gif

3. 样式

在样式中可以设置堆叠条形图组件的位置、颜色、坐标轴、提示信息和动画等。

接下来，会用以下示例数据对组件样式进行说明：

项目类型	数量
项目一	3000
项目二	2500
项目三	2300
项目四	2000
项目五	1800
项目六	1600
项目七	1300

3.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
抽样率	1）对数据进行抽样展示。如有 100 条数据，抽样率为 100%，此时会显示 100 条数据，如抽样率为 50％，则只显示 50 条数据；	2）这个设置项主要是在数据量过多、组件显示效果不佳时，可以借助这个选项来减少数据量，但是与此同时部分数据也会不显示，所以要谨慎使用。

玫瑰环图 透明度变化，如下图所示：
2.不透明.gif

3.2 图形形状

图形形状描述的是组件中数据的形状，可对图形的边框宽度、边框颜色、开始角度、结束角度和内圆半径占比进行相关样式设置。
玫瑰环图 图形形状设置，如下图所示：
3.图形形状设置.png

3.3 排序

将数据按顺时针顺序呈现在组件中，组件的排序方式有 3 种：不排序、从小到大、从大到小。
玫瑰环图 从大到小排序样式，如下图所示：
4.从大到小.png

3.4 数据颜色

指示组件的填充颜色。可以对这些字段单独进行颜色设置。
玫瑰环图 示例数据颜色，如下图所示：
5.1颜色.png 5.2颜色.png

玫瑰环图 更换数据颜色，如下图所示：
5.3颜色.png 5.4颜色.png

3.5 图形文本

图形文本是将数值或百分比显示在组件的图形上面。
玫瑰环图 图形文本位置在内部样式，如下图所示：
6.1图形文本.png

玫瑰环图 图形文本位置在外部样式，如下图所示：
6.2图形文本.png

3.6 图例

鼠标移动到图表中会出现数据的具体内容，可以了解每项代表的意思。图例设置包括图例位置、颜色、大小及偏移量。
玫瑰环图 图例顶部居中样式，如下图所示：
7.图例.png

3.7 内边距

内边距可以设置组件中心距离上下左右边框各自的位置，单位为px。
边距.png

3.8 提示信息

提示信息指的是鼠标移动到组件上时显示的信息，提示信息样式包括：提示框样式、文字样式和数据格式的设置。
玫瑰环图 提示信息样式，如下图所示：
8.1提示信息.gif

3.9 展示设置

可以设置组件中数据的轮播展示。未开启循环播放时，动画只在启动全屏时播放一次，开启循环播放之后才会按照间隔时间循环播放动画。
玫瑰环图 轮播效果，如下图所示：
轮播.gif

3.10 大小＆位置

通常我们可以通过直接点击和拖动组件来设置大小和位置，在这里也可以通过直接输入X 坐标、Y 坐标、宽和高来设置。

配置项	说明
组件大小	组件的 X、Y 轴坐标，X 坐标为组件左上角距离页面左边界的像素距离，Y 坐标为组件左上角距离页面上边界的像素距离。
组件位置	即组件的宽度和高度，单位为px。
组件旋转	三维空间旋转可以输入任意数值，数值对应角度向 X 轴/Y 轴旋转。

位置.png

3.11 边框设置

在此处可以对组件边框的边框颜色、宽度、图形边框圆角半径等样式进行配置。
玫瑰环图 边框样式，如下图所示：
10.边框.png

3.12 背景设置

组件默认没有背景颜色，如果需要设置背景颜色，可以在此处进行设置，也可以将背景设置为一张图片或视频，可以选择填充方式和模糊程度。
玫瑰环图 无背景色样式，如下图所示：
11.无背景.png

玫瑰环图 有背景色样式，如下图所示：
11.有背景.png

4. 交互

交互功能为组件赋予了在一定条件下与大屏操作进行交互的能力。

【温馨提示】详细的交互设置请参考设置交互教程。

5. 数据

对数据进行配置可以让组件根据相应的数据显示对应的图形，目前，山海鲸可视化软件支持导入文件数据、连接数据库、连接 API、连接山海鲸数据管家等多种数据连接方式。

5.1 字段设置

在组件中，分类字段反应了圆环组成部分，取值字段反应了每一个组成部分的值。可将数据拖拽放入对应轴字段展示数据，也可单击后一一勾选。

玫瑰环图组件的字段设置有以下一种情形：

5.1.1 情形一

当分类字段为一个字段，取值字段为一个字段时，组件如下所示：
12.数据.png

上图中所用示例数据如下：

项目类型	数量
项目一	3000
项目二	2500
项目三	2300
项目四	2000
项目五	1800
项目六	1600
项目七	1300

其中，分类字段使用了“项目类型”字段，取值字段使用了“数量”字段，上图中的“数量”自动进行了聚合处理（求和），也可以手动修改聚合方式，设置位置如下所示：
13.数据.png

5.2 动态数据项

使用动态数据，可以更灵活地对组件中的每一个样式属性做设置。

【温馨提示】详细的动态数据项设置请参考设置动态数据项教程。

5.3 数据联动

假设有 2 个表单分别为表单 A、表单 B，将 A 表单里某个字段的值作为查询条件，关联引用出 B 表单的数据，并填写到指定的字段中，就是数据联动。

联动项	说明
联动其他组件	开启数据联动后，单击一个图表中的任一数据点，其他使用相同数据集的图表也会随其联动变化。
受其他组件联动	开启数据联动后，图表中的数据会随发起联动的组件的变化而变化。

【温馨提示】详细的数据联动设置请参考设置数据联动教程。

5.4 数据筛选

将满足条件的数据通过筛选过滤出来。

筛选条件	说明
不筛选	不进行数据筛选。
筛选数据源指定行	可选择筛选数据源某一行数据。
选择数据条件	可自行选择数据筛选的条件。

【温馨提示】详细的数据筛选设置请参考设置数据筛选教程。

6. 代码

通过添加JavaScript 文件，可以满足对组件进行二次开发的需求。

例如，我们希望组件能够自动在大屏上向右移动，只需添加相应的JavaScript 文件即可实现，以下为本教程使用的示例代码：

/**
 * Extension.prototype.element;
 * Extension.prototype.enabled;
 * Extension.findExtensionsOfClass(className)
 * Element.prototype.setOption()
 * Element.prototype.getOption()
 * Element.prototype.getFullData()
 * Element.prototype.name
 */
class Button{
  update(){
    const position = this.element.getOption(
      ["position"]
    );
    // 当前元素在X轴上移动一定的距离
    this.element.setOption(
      ["position"],
      [(position[0] + 1 )%100,position[1]]
    );
  }
}
export default Button;