山海鲸可视化

基础平滑折线图

在组件库中,我们给大家提供了丰富的组件,这些组件都已经预设了一些样式,这是为了降低大家在项目制作过程中的设计复杂度,但是这并不代表我们不可以对其样式进行修改。

基础平滑折线图是折线图组件的一种预设样式,包含了折线图组件所有的功能。

在组件的使用过程中,我们可以按照以下步骤进行设置:

1. 添加组件

如果您不太熟悉组件,可以通过组件窗口找到该组件,然后添加组件,如下图所示:
image.png

如果您比较熟悉组件,可以通过搜索来添加组件,这个方式会更便捷一些。
点击搜索按钮或按键盘Ctrl+F打开搜索框,输入组件名称进行搜索,然后点击对应的组件进行添加。
image.png

2. 绑定数据

第一步:确认数据源格式

不同的组件适合于不同格式的数据,如果数据源格式不符合组件的要求,就无法正常显示内容。

(1) 数据类型 1

这种数据类型适用于折线数量固定不变的情况。
这种数据类型是一个 X 轴字段多个 Y 轴字段,一个 Y 轴字段对应一条折线。
其中 X 轴字段是字符串类型,Y 轴字段是数字类型

X 轴字段(城市) Y 轴字段 1(男性平均收入) Y 轴字段 2(女性平均收入)
北京 100 95
上海 110 105
杭州 90 85
南京 90 85
深圳 110 105

(2) 数据类型 2

这种数据类型适用于折线数量不固定的情况。
这种数据类型是两个 X 轴字段一个 Y 轴字段,其中 X 轴字段 1 对应 X 轴坐标分类,X 轴字段 2 对应折线,所以可以通过修改 X 轴字段 2 进行折线数量的调整(例如在下面的数据中对专业类型进行调整)。
其中 X 轴字段 1 和 X 轴字段 2 是字符串类型,Y 轴字段是数字类型

X 轴字段 1(城市) X 轴字段 2(专业) Y 轴字段(平均收入)
北京 计算机 100
北京 机械 95
上海 计算机 105
上海 机械 100
杭州 计算机 85
杭州 机械 80
南京 计算机 85
南京 机械 80
深圳 计算机 105
深圳 机械 100

第二步:设置数据字段

(1)使用组件自有数据

每个组件都自带有一个示例数据源。
点击组件,在右侧设置窗口中切换到数据设置,我们可以看到组件已经设置好了数据字段,且数据字段来自于组件自有数据
image.png

如果我们是在本地数据源准备好之前进行项目制作,例如制作一个原型图或者一个 Demo,此时我们可以直接使用组件自有数据。
组件自有数据符合上述的组件数据源格式要求,但是不一定符合您的项目需求,所以您需要先对其进行修改才能使用。
在项目编辑界面右下角,我们可以直接修改数据,组件中的数据也会实时更新。
image.png

(2)使用本地数据

第一步:添加数据源

如果我们已经准备好了本地数据源,我们就不要使用组件自有数据源了,此时我们需要先把本地数据源添加进来。
点击“添加数据”菜单。
image.png

在连接数据弹窗中,我们选择对应的数据源类型。
image.png

以 Excel 数据源为例,我们将本地 Excel 文件添加进来(更多数据源添加请参考连接数据系列教程 →_→ 连接数据
image.png

添加完成后,我们可以在连接数据窗口中看到对应的数据源。
image.png

第二步:设置数据字段

点击选中组件,在右侧设置窗口中切换到“数据”,在右下角窗口中切换到项目公共数据(同一个项目中所有数据源是共享的)。
image.png

修改数据字段前,我们需要先删除当前的字段,点击字段右侧的叉可以删除这个字段。
image.png

删除之后,右侧字段设置为空,同时组件会提示“未设置数据”。
image.png

接下来我们把新的数据字段添加到组件的字段设置中。
基础平滑折线图.gif

(3)设置系列字段

针对上述数据类型 2,下面我们演示一下“系列字段”是如何使用的
数据内容如下,将“城市”设为 X 轴字段,“专业”设为系列字段,“平均收入”设为 Y 轴字段:
image.png

生成的折线图如下,可以看到此时有两个折线,一个是计算机,一个是机械:
image.png

接下来我们添加一个新的专业“电子”,数据修改如下:
image.png

此时折线图如下:
image.png

3. 设置组件样式

点击选中组件,在右侧设置窗口中切换到样式设置,这里划分了不同的设置分类,每一个分类里有不同的设置项,这些分类和设置项根据不同的组件会有不同的内容。
image.png

3.1. 固定样式设置

所谓固定样式,就是设置完之后一直保持的组件样式。
下面我们按照每一个设置项给大家介绍一下具体的设置。

3.1.1 基本设置

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

基础平滑折线图透明度变化,如下图所示:
透明度.gif

3.1.2 颜色

指示组件的填充颜色。给组件的 Y 轴字段配置数据后,可以对这些字段单独进行颜色设置。
基础平滑折线图 示例数据颜色,如下图所示:
image.png

基础平滑折线图 更换数据颜色,如下图所示:
颜色.gif

3.1.3 X 轴

配置项 说明
数据类型 4 种类型,分别是分类连续数值时间对数,数据类型的选择根据导入的数据源而定。
轴线 X 轴的线条类型、颜色及粗细的配置。
轴刻度线 X 轴的刻度线颜色、粗细及长度的配置。
轴刻度值 X 轴的轴标签位置、距轴线的位置、字体设置、外发光展示设置及旋转角度的配置。
显示轴名称 X 轴的轴标签的单位,可调整单位内容和字体样式。

image.png

3.1.4 Y 轴

配置项 说明
数据类型 2 种类型,分别是数值和对数,数据类型的选择根据导入的数据源而定。
轴线 Y 轴的线条类型、颜色及粗细的配置。
轴刻度线 Y 轴的刻度线颜色、粗细及长度的配置。
轴刻度值 Y 轴的轴标签显示格式、计数单位、小数设置、刻度值范围和颜色、大小,字体设置和外发光显示设置,其中轴刻度值支持系统自适应也支持自定义值范围
显示轴单位 Y 轴的轴标签的单位,可调整单位内容和字体样式。

image.png

【温馨提示】要注意Y 轴的轴刻度值设置,轴刻度值显示格式有两种:数值百分比,注意选择和数据相对应的格式。轴刻度值设置有两种:自适应自定义,在自定义的时候要注意最小、最大刻度值的设置,必须比数据的值大。

3.1.5 折线右轴

折线右轴可以用来展示与左轴不同范围的数据,以便更清晰地呈现多组数据之间的关系。
image.png

3.1.6 图形文本

图形文本可以对图形中文本的数据格式以及文字样式进行设置。
image.png

3.1.7 网格线

网格线易于查看和计算数据,在这里可以对组件的 X 轴、Y 轴的网格线进行设置,包括线条类型和粗细、线条颜色和粗细等内容。
image.png

3.1.8 辅助线

辅助线是一种参考线、分界线,设置辅助线的位置可以对数据分布形态进行分割和归纳,使得数据分布形态及趋势更加明显。当线条类型为虚线时,可以设置 Y 轴的虚线粗细。
例如,将辅助线线条位置设置为700,此时组件上会出现一条供参考的分界线,帮助我们查看以数据“700”为分界的数据分布形态。
image.png

3.1.9 图形形状

图形形状描述的是组件中数据的形状,除此以外还可对图表的折线进行相关样式设置。

配置项 说明
显示样式 自适应、显示全部和自定义,可自行选择。
折线 可设置折线、平滑线和虚线。
可设置点的形状、大小和粗细。

基础平滑折线图 普通样式,如下图所示:
image.png

基础平滑折线图 折线样式,如下图所示:
image.png

基础平滑折线图 虚线样式,如下图所示:
image.png

3.1.10 图例

鼠标移动到图表中会出现每条数据的具体内容,可以了解每项代表的意思。图例设置包括图例位置、颜色、大小及偏移量
image.png

【温馨提示】图例不会随着组件大小变化而变化,但会遮住组件具体内容,此时需要调整组件的内边距以达到内容的完整展现。

3.1.11 提示信息

提示信息指的是鼠标移动到组件上时显示的信息,提示信息样式包括:提示框样式、文字样式和数据样式的设置
image.png

3.1.12 内边距

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

3.1.13 展示设置

可以设置组件中数据的展示形式,组件的展示形式有 2 种:滚动展示和轮播展示。未开启循环播放时,动画只在启动全屏时播放一次,开启循环播放之后才会按照间隔时间循环播放动画。
展示设置.gif

3.1.14 大小&位置

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

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

3.1.15 边框设置

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

3.1.16 背景设置

组件默认没有背景颜色,如果需要设置背景颜色,可以在此处进行设置,也可以将背景设置为一张图片或视频,可以选择填充方式模糊程度
基础平滑折线图 无背景色样式,如下图所示:
image.png

基础平滑折线图 有背景色样式,如下图所示:
image.png

3.2. 条件样式设置

所谓条件样式,就是组件会根据数据条件变化的样式。(关于数据条件的设置请参考这个教程 →_→ 数据条件)。
几乎所有的设置项都可以进行条件样式的设置,但是不同的设置项在设置条件样式时会有一点区别,具体有以下两种方式:

(1)方式 1:在扩展设置菜单中设置

大部分的设置项的条件设置方式都属于这种,具体步骤如下:
以基本设置中的不透明度设置项为例。
点击选中组件,在右侧组件设置界面中切换到样式设置,第一个设置项便是基本设置。
image.png

将鼠标移动到该设置项上,可以看到设置项名称右侧会出现三个点(扩展设置按钮)
image.png

点击这三个点,可以打开扩展设置窗口,里面会有多个选项,第一个便是“条件样式”
image.png

点击“条件样式”可以打开条件样式设置窗口。
image.png

接下来我们先点击“添加条件”,然后选择需要触发的数据条件(这里可以选择的数据条件是已经设置好的数据条件)。
根据当前设置项,我们可以设置满足条件 1 时的不透明度数值,以及当条件都不满足时的不透明度数值。
image.png

设置完成之后,这个设置项就会出现“已启用条件样式”的提示。
image.png

(2)方式 2:直接在设置项中设置

有一些设置项的条件设置方式直接显示在设置项中,这种就可以直接在外面设置,具体步骤如下:
在项目中我们比较常用的一个设置就是根据数据条件改变组件的颜色,这里我们以颜色设置为例。
点击选中组件,在右侧组件设置界面中切换到样式设置,往下找到颜色设置。

在该设置项中,有一个数据条件开关,开启之后,我们就可以进行条件样式的设置了。
image.png

设置过程与上述基本一致,首先是点击添加数据条件,然后对设置项进行设置。
image.png

3.3. 通过数据字段设置样式

待所有的设置项的修改本质都是值的修改,所以我们所有设置项都可以通过数据字段进行控制。
这里需要用到动态数据字段的功能。
仍然以基本设置中的不透明度设置为例,点击选中组件,在右侧设置窗口中切换到样式设置,然后将鼠标移动到不透明度设置项上,点击三个点打开扩展设置窗口,或者直接右击打开扩展设置窗口。
image.png

点击第三个选项“生成数据字段”。
image.png

然后再切换设置界面到数据设置界面,此时可以看到界面中新添加了一个动态数据字段的设置项,并且针对刚才选择的不透明度设置项生成了一个关联的字段。
image.png

接下来我们只需要添加一个数据字段到这里,就可以通过数据控制不透明度了。
这里我们添加的数据字段中,数值是 0,所以最终效果是,通过动态数据字段将不透明度的数值修改为 0,从而让组件变成了隐藏。
基础平滑折线图.gif

4. 设置组件交互

点击选中组件,在右侧设置窗口中切换到“交互”,可以对当前组件的交互进行添加和删除。
所有组件在添加后都有两个预设交互,对应的分别是入场动画和离场动画,这两个交互建议大家不要删除。
对于图表类组件,通常不需要设置动画之外的交互。
image.png

5. 二次开发

点击选中组件,在右侧设置窗口中切换到“代码”,可以对组件进行二次开发设置。
image.png

二次开发需要通过载入JavaScript 脚本文件来实现,默认是空的,我们可以点击“添加”按钮来添加设置项,多个脚本可以添加多个设置项。
image.png

在二开的过程中,我们可以对组件的样式进行控制,如果我们希望控制某个设置项,可以先在样式中查看该设置项的二开代码示例。
将鼠标移动到设置项(注意是某一个设置项而不是设置分类)上,可以看到三个点,如下图所示:
image.png

点击三个点可以打开扩展设置弹窗,里面第二个便是“调用代码示例”
image.png

点击“调用代码示例”可以看到这个设置项的二次开发调用代码示例。
image.png

这里我们举一个简单的二开示例(更详细的请参考二次开发教程):
二开功能:组件自动在大屏上向右移动
示例代码:如下所示

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;

点击“选择文件”,添加JavaScript 脚本文件
image.png

最终效果如下图所示:
基础平滑折线图.gif

6. 设置组件的多状态切换

多状态主要用于通过数据条件或是点击交互(通常是点击其他组件来触发本组件的状态切换)来切换组件设置项的场景,这里的设置项包括组件的样式、交互、数据和代码。
举个例子,点击按钮切换组件显示隐藏,这个就可以通过状态切换来实现。

6.1. 添加状态

每一个组件都有一个默认的状态属性,在这个默认的状态中,包含了上述所有的设置。
image.png

但是我们也可以添加多个状态,这样每个状态都会包含上述所有的设置,而这些状态之间又是互相独立的。
我们可以通过以下两种方式来添加新状态:

第一种:新建状态

点击右上角的添加状态按钮可以添加一个新的组件状态。
image.png

在状态设置窗口中,我们可以设置状态的名称。
image.png

新建的状态需要有默认的设置,默认情况下新状态都与当前组件的默认状态保持一致。
我们也可以修改这个默认设置,开启窗口中的高级设置,我们可以设置这个新状态的跟随对象,也就是这个新状态与现有的哪个状态设置保持一致。
image.png

第二种:复制已有状态

点击右上角的状态名称可以展开状态列表,展开后可以看到当前组件的所有状态。
image.png

在这个状态列表中,我们可以对状态进行重命名,复制和删除。
点击状态名称右侧的复制按钮,可以复制当前状态为一个新状态,复制后的新状态的所有设置项与复制对象状态保持一致。
image.png

6.2. 切换状态

在编辑项目时,我们可以通过点击状态列表中的不同状态来切换组件状态。
image.png

在项目运行时,状态的切换一般需要通过数据条件点击交互

第一种:根据数据条件切换状态

在新建状态时,或者点击状态列表右侧的编辑可以打开状态设置窗口,在开启高级设置后,可以看到状态切换的数据条件设置。
在这里我们可以选择已设置的数据条件,从而在数据条件满足时,组件的状态就会发生变化。
image.png

第二种:根据点击交互切换状态

通过点击交互来切换组件状态一般是点击其他组件来切换当前组件的状态,所以交互设置在其他组件上而非本组件上。
举个例子,点击按钮切换当前组件的显示隐藏状态。
首先我们给基础平滑折线图组件设置一个隐藏状态(默认状态当做显示状态)。
新建状态,然后修改基本设置中的不透明度为 0%。
image.png

接下来我们给显示按钮组件添加一个交互,点击后切换基础平滑折线图组件到默认状态(显示状态)。
image.png

给隐藏按钮组件添加一个交互,点击后切换基础平滑折线图组件到隐藏状态。
image.png

这样我们就实现了点击按钮切换基础平滑折线图组件显示隐藏的效果了。
基础平滑折线图.gif

6.3. 锁定状态

在组件的样式设置中,大家会发现有一些设置项上有个锁定的图标,这个表示当前所有状态中的这个设置项都已经被锁定到默认状态,也就意味着如果修改这个设置项,那么所有状态中的这个设置项都会统一被修改。
这是在组件的多状态下可以统一修改多个状态中相同的设置项的功能。
image.png

如果不想锁定,可以点击后进行解锁,那么所有状态中的这个设置项都会被解锁。
image.png

有一些常用的设置项默认就被锁定了,如果希望锁定其他设置项,可以点击设置项右侧的三个点,然后进行锁定。
image.png