图形属性

在仪表盘组件的属性设置中，不同组件之间的设置项各有不同，本文主要介绍图形类、指标类组件特有的属性设置。

圆角

说明

圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。

“圆角”设置项可设置柱子的“左上”“右上”“左下”“右下”的圆角大小。

效果

轴位置

说明

在对比柱图中，轴位置用于设置维度所在轴的显示位置，分为：左、右、中、两侧；（默认效果为 中 ）

效果

柱间距

说明

“柱间距”设置项用于设置系列数据的柱间距离。包括“同系列的柱间距”和“不同系列的柱间距”。

效果

同系列柱间距：

不同系列柱间距：

堆积效果

说明

在柱图、趋势线和联合图类组件中，堆积效果设置项可以设置同类指标（同图形类型指标）是否以堆积效果展示，实现堆积与不堆积类型组件间的切换。

效果

如上，以柱图为例：设置堆积效果后，组件类型自动切换为堆积柱图。

堆积分组

说明

在联合图中，堆积分组可以实现在多个同图形类型的指标中，将指定的指标进行堆积展示。

效果

例如：有”销售量“、”订单量“、“库存”、”销售额“四个费用的指标，其中数量类（销售量、订单量和库存）使用左Y轴，金额类（销售额）使用右Y轴，我们只想”订单量“和”库存“堆积展示，此时就可以通过堆积分组设置项实现。

1、在联合图的标记区设置”销售量“、”订单量“和“库存”为 左轴、柱图，效果如下图所示：

2、在组件属性的 系列 中，将”订单量“和”库存“设置 堆积分组 名为“堆积分组1”，效果可以看到只有”订单量“和”库存“两个指标堆积展现，“销售量”还是普通柱图展现，效果如下图所示：

注意事项

1、在双Y联合图中，暂不支持不同轴的线图、面积图的同名堆积分组。

2、在双Y联合图中，左轴、右轴分别分配两组数据，四组数据的堆积分组名称相同。那么左轴的数据按左轴的刻度大小显示，右轴的按右轴的刻度大小显示，然后堆积到一起。

半径

说明

“半径”设置项用于设置图形的半径，半径为从中心到周边的任何线段的长度，根据不同图形分为如下两种：

• 极坐标柱图、极坐标堆积柱图、雷达图、油量图和水球图：只有一种半径。

• 饼图和旭日图：半径分为“内半径”和“外半径”。

内外半径对应的模型图如图：

效果

极坐标柱图和雷达图的半径如图：

饼图和旭日图的半径如图：

总计值

说明

瀑布图中，设置是否显示总计值项，默认效果为隐藏。

效果

瀑布图的总计值示例效果如图：

柱宽

说明

瀑布图中，设置柱条的宽度。

效果

瀑布图的柱宽如图：

标注

说明

设置图形是否显示最大值（MAX）和最小值（MIN）的标注。

可设置标注的颜色，标注文字的字体类型、字号、文字颜色、加粗和斜体。

效果

画布

说明

设置组件图形区与画布之间的距离，可以对上下左右间距分别设置。

画布边距对应的模型图如下：

效果

连接空数据

说明

在存在空数据的情况下，设置是否继续连接后面的非空数据。是则连接，否则不连接；默认效果为不连接。

效果

特制品为空数据，图表1设置为连接空数据，线图继续连接后面的非空数据。图表2设置为不连接空数据，线图不继续连接后面的非空数据。如图：

数据点

说明

对数据点的形状、大小等进行设置，不同图形的设置项不同，具体如下：

• 线图、面积图的设置项有：形状、大小、旋转角度。

• 散点图的设置项有：形状、旋转角度。

• 雷达图的设置项有：形状、大小

效果

线图的不同数据点效果如图：

散点图的不同数据点效果如图：

雷达图的不同数据点效果如图：

风格

说明

风格在线图、面积图、饼图和漏斗图中，通过设置项可点击直接切换图形风格；

• 线图类型中，包括：“线”、“平滑曲线”、“阶梯线”；

• 面积图类型中，包括：“线”、“平滑曲线”。

效果

线图的不同风格效果如图：

面积图的不同风格效果如图：

线样式

说明

在线样式中，可以对线的宽度和线型进行设置，使得线图整体效果在整个仪表盘中较为和谐。

效果

线型：包括实线、虚线、虚点，效果如下：

宽度：可以修改线条的宽度，宽度范围为 0~10，默认宽度为2，部分效果如下：

图形风格

说明

在饼图类型组件和漏斗图类型组件中，对图形的风格进行切换：

• 饼图类型中，包括：“饼图”、“环形图”、“半径玫瑰图”、“玫瑰图”

• 漏斗图类型中，包括：“降序”、“升序”、“左降序”、"右降序"、“左升序”、“右升序”。

效果

饼图的不同风格效果如图：

漏斗图的不同风格效果如图：

圆心位置

说明

用于设置饼图类型组件的圆心位置，圆心位置默认处于区域中心，即 x 50%，y 50%。

效果

设置圆心位置的x值为70%，图形从中心往右偏移20%，如图：

边框

说明

组件支持设置线条、图片、圆角角度设置组件边框，支持设置线条边框、图片边框、圆角角度。

• 饼图系列、旭日图：

• 水球图

• 进度图

效果

饼图、旭日图设置图形边框样式为虚线，边框大小为2，边框颜色为红色，如图：

水球图支持设置图形边框样式、以及边框到水球的边距，效果如图：

进度图支持设置边框样式、内边距和圆角，如图：

开始角度

说明

设置饼图类型组件和旭日图系列排序的开始角度，只能输入0-360之间的数值。

“开始角度”对应的模型图：

效果

选中模式

说明

设置饼图类型组件选中的模式，有“不可选、单选和多选”三种模式。

• 不可选：选择不了数据。
• 单选：只能选择一个数据。
• 多选：一次可选多个数据。

效果

默认选中

说明

当图形为 环形图，且选中模式为 单选 时，支持设置默认选中列表数据中的第几位。

效果

圆心数据

说明

在环形图组件设置中打开“圆心数据”设置项，可设置环形图中间位置展示标签内容：占比、指标、分类。

各设置项说明如下：

区域颜色

说明

用于设置地图中无数据区域的颜色。

效果

设置区域颜色为橙色，如图：

区域边界色

说明

用于设置地图中各省份之间的边界色。

效果

设置区域边界色为红色，如图：

高亮颜色

说明

用于设置地图中鼠标移入时区域的颜色。

效果

将高亮颜色设置为绿色，如图：

高亮边界色

说明

用于设置地图中鼠标移入时区域的边界色。

效果

将高亮边界色设置为红色，如图：

缩放

说明

设置地图可以缩放或者不可以缩放，默认效果为可以缩放。

效果

设置为可以缩放，滚动鼠标中间轮进行缩放：

缩放比例

说明

用于设置地图默认的缩放比例，只能输入0.5-5之间的数值。

效果

1、缩放比例为1时（默认值），如图：

2、缩放比例为1.5时，如图：

导航栏

说明

设置矩阵树图是否显示导航栏，默认效果为隐藏。

效果

系列名称

说明

设置树图导航栏上数据系列（树的顶点）的名称。

效果

先设置显示导航栏，接着设置系列名称为“地区”，如图：

拖拽

说明

设置桑基图允许拖拽或不允许拖拽。

效果

斥力因子

说明

设置关系图中，关系对象之间的距离，此时不同大小的值会线性映射到不同的斥力，值越大则斥力越大，只能输入0-1000之间的数值。

效果

1、斥力因子为200时，如图：

2、斥力因子为600时，如图：

连线曲率

说明

设置关系图节点之间的连线曲度，值越大曲度也大，只能输入0-100之间的数值。

效果

1、连线曲率为0时，为直线，如图：

2、连线曲率大于0时为曲线，下图以连线曲率为1时的效果：

普通状态

说明

设置关系图边框样式、边框粗细、颜色以及连线样式、粗细、颜色。

效果

设置边框样式为实线，边框粗细为2，颜色为黄色；连线样式为虚线，连线粗细为2，颜色为红色，效果如图：

高亮状态

说明

高亮状态即为鼠标移入时状态。

• 设置高亮状态的颜色。
• 设置高亮状态的边框样式、边框粗细、颜色。
• 设置高亮状态的连线样式、粗细、颜色。

效果

设置高亮状态颜色为黄色；

边框样式为实线，边框粗细为3，颜色为紫色；

连线样式为虚线，连线粗细为2，颜色为黑色，动态效果如图：

轴线样式

说明

雷达图类型组件中，切换轴线的样式，包括：多边形、圆形。

效果

显示风格

说明

雷达图类型组件中，切换显示风格，包括：线、面积。

效果

分割数

说明

用于设置雷达图的隔区数。

效果

设置3个分割数，效果如下：

轴线

说明

 对雷达图轴线的设置，包括“是否显示轴线、轴线样式”。

• 显示：轴线显示或者不显示。
• 样式：设置轴线的样式、粗细和颜色。

效果

轴线显示和不显示的效果对比图：

设置轴线样式为实线，轴线大小为1，颜色为黑色，如图：

隔线

说明

 对雷达图隔线的设置，包括“是否显示隔线、隔线样式”。

• 显示：隔线显示或者不显示。
• 样式：设置隔线的样式、大小和颜色。

效果

隔线显示和不显示的效果对比图：

设置隔线样式为虚线，隔线大小为1，颜色为黑色，如图：

隔区

说明

对雷达图隔区的设置，包括“是否显示隔区、隔区颜色”。

• 显示：设置隔区显示或者不显示。
• 颜色：分别设置隔区的颜色。

效果

隔区显示和不显示的效果对比图：

分别设置隔区颜色，如图：

刻度（雷达图）

说明

设置雷达图类型组件中，刻度的显示位置及样式。

显示位置包括：自动、垂直、倾斜、不显示。

样式包括：字体类型、字号、文字颜色和加粗。

效果

位置

说明

设置指标看板中内容相对组件的位置，支持设置：居左、居中和居右的效果，默认效果为居中。

效果

维度名称

说明

对指标看板中维度名称的设置，包括“是否显示维度名称、文字样式”。此设置只有指标看板组件在 维度 区中添加了维度字段时，才能看到效果。

• 显示：设置维度名称显示或者不显示。
• 文字样式：字体类型、字号、文字颜色、加粗、斜体和下划线。

效果

每行列数

说明

设置每行显示的个数。

效果

• 指标看板

• 水球图

设置每行列数为3

分隔线

说明

对指标看板中的分隔线样式进行设置：

• 分隔线类型：无、虚线、点线、实线。
• 分隔线粗度：0-5。
• 分隔线颜色：可自定义。

效果

设置分隔样式为虚线，隔线大小为2，颜色为红色，如图：

图标

说明

在指标看板中，图标设置项可显示图标效果，默认效果为不显示图标。

效果

度量名称

说明

对指标看板中，度量值的名称进行设置，包括：是否显示度量名称、内容、位置及字体样式。

• 显示：设置度量名称显示或者不显示，默认效果为显示。
• 内容：默认显示度量字段的当前名称，可自定义。
• 位置：显示位置可分为：顶部、底部、左、右；字体位置可分为：居左、居中、居右、居上、居下。
• 字体样式：可以设置字体类型、字号、文字颜色、加粗、斜体和下划线。

效果

1、各位置的效果如图：

2、度量名字内容文字样式效果如图：

指标

说明

对指标看板中的指标内容进行字体样式设置，包括字体类型、字号、文字颜色、加粗、斜体和下划线。

效果

后缀

说明

指标看板中，指标值后可添加自定义后缀，包括：是否显示后缀、内容、位置及字体样式。

• 显示：设置后缀显示或者不显示，默认效果为不显示。
• 内容：默认为空，可自定义输入后缀内容。
• 字体样式：可以设置字体类型、字号、文字颜色、加粗、斜体和下划线。

效果

指标名称

说明

对指标的名称进行设置：

• 在油量图系列组件中，包括油量图、环形进度图、外刻度油量图、内刻度油量图和指标卡

可设置是否显示指标名称、内容、样式、偏移位置：

（1）显示指标名称：设置指标名称是显示或者不显示，默认效果为显示。

（2）内容：默认显示度量字段的当前名称，可自定义。

（3）样式：设置指标名称的字体类型、字号、文字颜色、加粗和斜体。

（4）偏移位置：设置指标名称的位置，包括水平偏移位置和垂直偏移位置。X、Y轴的起始位置位于组件对角线中心，Y轴上方为负方向，Y轴下方为正方向；X轴左方为负方向，X轴右方为正方向。

• 在水球图组件中

可设置是否显示指标名称、内容、样式、偏移位置：

（1）显示指标名称：设置指标名称是显示或者不显示，默认效果为显示。

（2）内容：默认显示度量字段的当前名称，可自定义。

（3）样式：设置指标名称的字体类型、字号、文字颜色、加粗和斜体。

（4）位置：设置指标名称相对水球的位置，包括居上、居中和居下。

• 在进度图组件中

可设置是否显示指标名称、垂直位置、水平位置调整以及字体样式：

（1）显示指标名称：设置指标名称是显示或者不显示，默认效果为显示。

（2）垂直位置：设置指标名称在垂直方向上显示的位置，包括居上、居中和居下，默认效果为居中。

（3）水平位置：设置指标名称在水平方向上显示的位置，包括居左和居右。

（4）样式：设置指标名称的字体类型、字号、文字颜色、加粗和斜体。

效果

• 油量图效果：

• 水球图效果：

• 进度图效果：

表盘风格

说明

对表盘样式进行切换或自定义：

内置了上述三种常用风格的表盘进行选择，如未能满足需求，可通过如下设置项进行配置：

• 开始角度：表盘开始角度。
• 结束角度：表盘的结束角度，0度起始位置为正右手侧，正上方为90度，可以从0到正360度或负360度调整。

• 宽度：表盘的宽度。

效果

以油量图组件为例：

指针

说明

对指针的样式进行设置

• 油量图系列组件中：可设置指针的形状、颜色和长宽。

形状类型包括：线型针、刀型针、水滴针、三角指针、无

效果

以油量图为例：形状选择刀型针：

• 进度图中：可设置指针的形状、颜色。

形状类型包括：无、三角形、倒三角形、圆形

效果

进度图形状选择为三角形：

表盘颜色

说明

设置油量图表盘指定区间的颜色。指定区间手动输入从0到100之间的值。

效果

区间数可增加和删除：

刻度/刻度样式

说明

设置油量图表盘刻度线的刻度指标是否显示、刻度颜色、刻度位置、刻度线长、刻度数、线样式。

• 显示刻度：设置刻度是否显示。
• 刻度颜色：设置刻度的颜色。
• 位置：设置刻度的位置，包括外、上和内容。
• 刻度线长：设置刻度线的长度。
• 刻度数：设置每格刻度数的数量。
• 线样式：设置刻度线的样式、粗细和颜色。

效果

使用“刻度样式”设置项对油量图进行设置，效果如下图所示：

分割线

说明

设置表盘刻度的分割线线长、刻度数、样式。

1. 刻度线长：设置刻度线的长度。
2. 刻度数：设置表盘划分的区域数量。
3. 样式：设置刻度线的样式、大小和颜色。

效果

设置分割线的刻度数为5，图中红色线即为分割线，可看到表盘被等分为5份

圆心位置

说明

对组件圆心位置进行调整（默认为 x：50%，y：50%）

效果

进度

说明

对油量图系列组件的进度情况进行样式设置，包括是否显示进度，颜色以及内容。

进度内容分为百分比和指标值：

• 百分比：可选择公式进行百分比计算以及设置小数位数

公式包括如下两种：

效果

当前进度为5.6%：

目标值

说明

用于设置图形的目标值：

效果

以水球图为例：当前库存量为3119，左图设置目标值为默认，右图设置目标值为5000。

指标值

说明

用于设置水球图的指标值。

各配置项如下：

效果

设置指标值的字体为楷体，大小为28，颜色为#4A90E2；位置居下；保留一位小数。实现效果如下：

动画

说明

用于开启关闭水球图的动画效果

• 显示。开启动画效果。
• 不显示。关闭动画效果，波浪层显示为平静波浪。

效果

关闭动画效果前后对比如下：

水球背景

说明

用于修改水球图内部的背景颜色，默认为透明背景。

效果

设置颜色为“#7ED321”

描述

说明

用于在图形下方显示当前度量的指标值和目标值，以及文本的布局及样式。（默认不显示）

• 【布局】默认值为【竖排】

效果

以水球图为例：设置显示描述，布局为【竖排】与【横排】的效果图如下：

布局列数

说明

进度条需要展示的列数（默认为值为3）

效果

指标标签

说明

对指标标签的垂直位置、水平位置、内容及字体样式进行设置。

• 垂直位置包括：
• 水平位置包括：
• 内容包括：百分比和实际值（在百分比中，可按需选择百分比计算公式、设置小数位数）

效果

目标值和指标标签结合运用可参考文档：进度图示例

轴高度

说明

设置进度图的粗细。（默认值为16）

效果

进度槽

说明

设置进度槽的颜色。

效果

颜色为#50E3C2：

刻度轴

说明

设置刻度轴是否显示及调整其刻度轴字体样式。

效果

图形事件

说明

设置是否允许开启echarts图形（矩形树图、旭日图）自带的图形事件，默认允许。

1、矩形树图的图形事件：聚焦

• 允许：点击任意字段矩形放大聚焦到画布中央。
• 禁止：点击任意字段矩形无反应。

2、旭日图的图形事件：下钻

• 允许：开启Echarts的旭日图自带的下钻功能
• 禁止：禁用Echarts的旭日图自带的下钻功能

图形渲染

说明

设置图形渲染时，所采用的渲染器方法：

• SVG：一种使用XML描述2D图像的语言。文本渲染能力强，刷新能力弱。适用于大区域渲染程序，比如高保真图形、带有某些特效的静态图像。
• Ganvas：HTML5新增的DOM，提供了像素级图形编程接口。文本渲染能力弱，刷新能力强。适用于图像密集型编程。比如高性能图形、复杂场景的实时动画。

最大系列数

说明

用于设置图表中进行考量对象的分组数。

最大系列数可应用在散点图上，推荐使用在大数据散点图中。

某系列下有多个成员时，所有成员数据合计后再进行分布效果处理。

图形主题

说明

用于设置选中组件的图形主题。

设置组件的图形主题优先级高于全局的图形主题。

效果

组件的图形主题如图：