面积图

面积图是在折线图的基础上,对折线以下区域进行颜色填充,用于在连续间隔或时间跨度上展示数值,常用来显示趋势和对比关系(多个面积块之间的对比)。

该组件在软件中的位置如下图所示:

选中组件时可以对组件进行设置,包括字段设置、样式设置和交互设置,其中字段设置如下图所示:

其中 X 轴字段为纵坐标,反应了条形的组成部分,Y 轴字段为横坐标。(关于如何添加字段请参考新手入门教程)

当 X 轴为多个字段,Y 轴为一个字段时,图形如下所示:

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

时间 品类 销售额
2019 年 1 月 男装 10000
2019 年 1 月 女装 20000
2019 年 2 月 男装 30000
2019 年 2 月 女装 40000
2019 年 3 月 男装 50000
2019 年 3 月 女装 60000
2019 年 4 月 男装 70000
2019 年 4 月 女装 80000
2019 年 5 月 男装 50000
2019 年 5 月 女装 60000
2019 年 6 月 男装 30000
2019 年 6 月 女装 40000

当 X 轴为一个字段,Y 轴为多字段时,图形如下所示:

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

时间 男装销售额 女装销售额
2019 年 1 月 1000 2000
2019 年 2 月 3000 4000
2019 年 3 月 5000 6000
2019 年 4 月 7000 8000
2019 年 5 月 5000 6000
2019 年 6 月 3000 4000

交互设置如下图所示:

(1)切换组件状态

可选择组件绑定状态
点击加号进行增加和批量设置

(2)刷新大屏数据

可开启后刷新大屏数据

(3)添加链接

可链接到 URL 或子大屏

(4)打开弹窗

绑定到弹窗分组

(5)关闭弹窗

绑定到弹窗分组

(6)切换到选项卡

可选择切换到选项卡组以及其中的第几项
点击加号增加和批量设置

样式的设置如下图所示:

(1)基本设置

包括:允许演示控制、是否显示

(2)数据颜色

每个数据可以独立进行颜色设置

(3)图形形状

包括:阴影颜色、阴影模糊程度、统一折线形状、统一显示点、统一折线粗细、每条折线独立设置和显示样式

统一折线形状可以设为折线、平滑线或者虚线

当每条折线独立设置时:可单独设置每条折线样式

显示样式可以设为:自适应、显示全部、自定义

(6)X 轴

X 轴的设置包括:数据类型、轴线、轴刻度线、轴刻度值。

(7)Y 轴

Y 轴的设置包括:轴线、轴刻度线、轴刻度值、显示单位。

(8)缩略轴

缩略轴的设置包括:缩略轴高度、曲线光滑、显示面积图、缩略轴文字颜色、缩略轴前景颜色、缩略轴背景颜色、缩略轴滑块。

(9)网格线

网格线的设置包括:X 轴和 Y 轴的网格线设置

(10)辅助线

辅助线的设置包括:线条位置、线条类型、线条颜色和线条宽度

当线条类型为虚线时,可以设置 Y 轴的虚线宽度

(11)提示信息

提示信息指的是鼠标移动到组件上时显示的信息。

数据显示格式包括:数据格式、提示框样式、文字样式。

(12)排序

排序的设置包括:排序方式。

(13)图形文本

图形文本是将每个子条形的数值或百分比显示在图形上面。

图形文本的设置包括:文本位置、文本与图形的间距、数据格式、文字样式和显示单位。

(14)图例

图例的设置包括图例位置、文字颜色和文字大小。

(15)内边距

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

(16)动画

动画效果可以对入场动画、展示动画和离场动画进行设置。

需要注意的是,未开启循环播放时,动画只在启动全屏时播放一次,开启循环播放之后才会按照间隔时间循环播放动画。

(17)大小和位置

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

三维空间旋转还可以输入任意数值,数值对应角度向 X 轴/y 轴旋转。

(18)边框设置

边框的设置包括:边框颜色、边框宽度、图形边框圆角半径和边框样式。

(19)背景设置

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