山海鲸可视化

和弦图

1. 简介

和弦图是一种显示矩阵中数据间相互关系的可视化方法,节点数据沿圆周径向排列,节点之间使用带权重(有宽度)的弧线链接。和弦图的节点使用权重线性布局,节点权重即决定节点大小,又决定节点位置,同时和弦图的连线使用源权重和目标权重控制线宽,粗细非均匀,而且和弦图的节点宽度为连线宽度之和,节点处的连线平铺不重叠。

2. 效果展示

效果展示.gif

3. 样式

在样式中可以设置堆叠条形图组件的位置颜色提示信息等。

接下来,会用以下示例数据对组件样式进行说明:
和弦图示例数据

3.1 基本设置

配置项 说明
不透明度 1)根据个人喜好或整体和谐度合理地使用透明度,会让大屏布局更美观; 2)这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏
文字排列 根据个人喜好或整体和谐度选择水平排列或垂直排列。

和弦图 透明度变化,如下图所示:
透明度.gif

3.2 数据颜色

指示组件的填充颜色。给组件的分类字段配置数据后,可以对这些字段单独进行颜色设置。

和弦图 示例数据颜色,如下图所示:
颜色1.jpg

颜色2.jpg

和弦图 更换数据颜色,如下图所示:
颜色3.jpg

颜色4.jpg

3.3 图形文本

图形文本是将每个子条形的数值、百分比或文字显示在组件的图形上面。
文本.jpg

3.4 内边距

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

3.5 提示信息

提示信息指的是鼠标移动到组件上时显示的信息,提示信息样式包括:提示框样式文字样式数据格式的设置。
效果展示.gif

3.6 大小&位置

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

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

位置.png

3.7 边框设置

在此处可以对组件边框的边框颜色、宽度、图形边框圆角半径等样式进行配置。
边框.jpg

3.8 背景设置

组件默认没有背景颜色,如果需要设置背景颜色,可以在此处进行设置,也可以将背景设置为一张图片或视频,可以选择填充方式模糊程度

和弦图 无背景色样式,如下图所示:
背景.jpg

和弦图 有背景色样式,如下图所示:
背景2.jpg

4. 交互

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

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

5. 数据

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

5.1 字段设置

在组件中,X 轴字段为纵坐标,反应了条形的组成部分,Y 轴字段为横坐标,反应了每一个条形部分的长度。可将数据拖拽放入对应轴字段展示数据,也可单击后一一勾选。

堆叠条形图组件的字段设置有以下一种情形

分类字段为两个字段取值字段为两个字段时,组件如下所示:
情形.jpg

上图中所用示例数据如下:
和弦图示例数据

其中,分类字段使用了“发出地”“目标地”字段,取值字段使用了“出口数量”“进口数量”字段。

5.2 动态数据项

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

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

5.3 数据联动

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

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

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

5.4 数据筛选

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

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

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

6. 代码

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 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;

点击“选择资源文件”,添加示例文件
image.png

添加完成后会代码会自动执行,此时组件已经能够自动在大屏上向右移动了。
代码.gif

【温馨提示】详细的代码设置请参考二次开发教程

7. 扩展设置

组件的每个样式属性都可以打开一个“扩展设置”菜单,将鼠标移至属性名称的右侧点击后即可看到,菜单共包含三个选项:“条件样式”“调用代码示例”“生成数据字段”

7.1 条件样式

此功能可以将已经设置好的数据条件应用于组件的样式属性中,便于实现组件在不同条件下的状态。

【温馨提示】详细的条件样式设置请参考数据条件教程

7.2 调用代码示例

此功能用于组件的二次开发,便于编写二次开发相关的JavaScript 代码
调用代码.jpg

【温馨提示】详细的调用代码示例设置请参考二次开发教程

7.3 生成数据字段

此功能可以给组件的样式属性生成一个“动态数据项”,便于精准控制样式的属性值。
生成数据字段.jpg

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

8. 组件状态

组件可以设置多个状态,状态之间可以通过设置状态触发条件来进行切换。

【温馨提示】详细的组件状态设置请参考设置组件的多状态教程

9. 数字孪生大屏应用案例

9.1 旅游数据监测数字孪生大屏