页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

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

效果

指标名称
指标名称
指标名称

说明

对指标的名称进行设置:

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

...

配置项

功能

位置

用于设置指标值显示的位置,默认居中显示。

  • 居上:指标值在水球图上方显示。
  • 居中:指标值在水球图内部中央位置显示。
  • 居下:指标值在水球图下方显示。
数值

用于设置指标值的展现形式,默认以百分比的形式展示。

  • 百分比,展示度量字段的实际数值与目标值的比值,其计算方式为【实际值/目标值×100%】;
  • 指标值,展示实际的计算结果或实际值;
小数位数

用于设置指标值显示的小数位数。默认值为2,即保留两位小数,取值区间为[0, 5]。

注意

当数值选择“百分比”时显示该选项.


公式

用于设置指标值的计算方式,其中公式“(指标值/目标值)*100%”一般适用于正向指标(如收入类),公式“(2-指标值/目标值)*100%”一般适用于反向指标(如成本费用类)。

效果

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

间距

说明

用于一个组件中多个水球图之间的间隔距离,支持输入0-1000之间的数值。

...

  • 显示:开启动画效果。
  • 隐藏:关闭动画效果,波浪层显示为平静波浪。

效果

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

Image Removed动画效果对比如下:

显示动画隐藏动画

Image Added

Image Added

水球背景

说明

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

Image Removed用于修改水球图内部的背景颜色

效果

设置颜色为“#7ED321”设置水球图背景色为绿色。

Image RemovedImage Added

描述

说明

用于在图形下方用于在水球图下方显示当前度量的指标值和目标值,以及文本的布局及样式。(默认不显示)

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

...

  • 显示:是否显示当前度量的指标值和目标值,默认效果为不显示。
  • 布局:设置描述内容的排版布局效果,默认值为竖排。
  • 样式:设置描述的文字样式,包括:字体类型、字号、文字颜色、加粗和斜体。

Image Added

效果

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

布局竖排横排
效果

布局列数

说明

进度条需要展示的列数(默认为值为3)设置进度图中,进度条需要展示的列数,默认为值为3。

Image RemovedImage Added

效果

列数为2列数为3
Image Removed

Image Added

Image Removed

Image Added

指标标签

说明

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

Image Removed

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

效果

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

...

用于设置进度图是否显示指标标签、垂直位置、水平位置、内容及字体样式。

Image Added

  • 显示:是否显示指标标签,默认效果为显示。
  • 垂直位置:居上、居中、居下。
  • 水平位置:居左、居右、随刻度。
  • 内容包括:百分比和实际值(在百分比中,可按需选择百分比计算公式、设置小数位数),其中公式“(指标值/目标值)*100%”一般适用于正向指标(如收入类),公式“(2-指标值/目标值)*100%”一般适用于反向指标(如成本费用类)。
  • 样式:设置指标标签的文字样式,包括:字体类型、字号、文字颜色、加粗和斜体。

效果

以垂直位置为“居上”、水平位置为“随刻度”、内容为“百分比”、显示1位小数、加粗倾斜紫色文字显示效果为例,效果如下图:

垂直位置和水平位置效果类似指标名称,可参考当前文档中的 指标名称 。

Image Added

信息

进度情况与目标值相关,目标值的说明可参考当前文档中的 目标值 。

粗细

说明

设置进度图的粗细。(默认值为16)

Image RemovedImage Added

效果

高度为1粗细为1高度为16粗细为16

Image RemovedImage Added

Image Modified

进度槽

说明

设置进度槽的颜色。设置进度图的进度槽颜色。

Image Removed

效果

颜色为#50E3C2:设置进度图的进度槽颜色为绿色,效果如下图:

Image RemovedImage Added

刻度轴

说明

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

Image Removed

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

  • 显示:是否显示刻度轴,默认效果为不显示。
  • 样式:设置刻度轴标签的文字样式,包括:字体类型、字号、文字颜色、加粗和斜体。

Image Added

效果

显示不显示

Image RemovedImage Added

Image RemovedImage Added

图形事件

说明

设置是否允许开启echarts图形(矩形树图、旭日图)自带的图形事件,默认允许。设置是否允许开启echarts图形(矩形树图、旭日图)自带的图形事件,默认效果为允许。

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

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

Image RemovedImage Added


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

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

Image RemovedImage Added

图形渲染

说明

设置图形渲染时,所采用的渲染器方法:

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

Image Added

最大系列数

说明

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

...

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

图形主题

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

用于设置选中组件的图形主题,可选择的图形主题来源可参考 图形主题

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

效果

组件的图形主题如图:

Image RemovedImage Added