1. 概述

本文将依次介绍每个指标图表的配置方式。

2. 详细说明

单值占比图

单值占比图的入口如下。

指标类图表 - 图1

单值占比图的数据配置区如下图所示。

  • 名称:指标的名称。
  • 值:指标的值。

指标类图表 - 图2

单值占比图的样式设置,分为图形、卡片设置两个子Tab。

图形设置:

  • 圆环:设置圆环的颜色、宽度等样式。
  • 指标:设置中间文字的展示内容跟样式。

指标类图表 - 图3

卡片设置:设置卡片的标题、边框、阴影、背景等样式。

水球图

水球图的入口如下。

指标类图表 - 图4

水球图的数据配置区如下图所示。

  • 名称:指标的名称。
  • 值:指标的值。

指标类图表 - 图5

水球图的样式设置,分为图形、卡片设置两个子Tab。

图形设置:

  • 水波样式:设置水波颜色、背景颜色等样式。
  • 文本样式:设置中间区域的文字样式。

指标类图表 - 图6

得分环

得分环的入口如下。

指标类图表 - 图7

得分环的数据配置区如下图所示。

  • 度量:设置得分环的度量字段,如下图所示为“数量”、“记录数”。

指标类图表 - 图8

得分环的样式设置,分为图形、辅助信息和卡片设置三个子Tab。

图形设置:

  • 环形设置:设置方向、环颜色、环底色、环值尺寸、环底尺寸、最大值、最小值。
  • 动画效果:设置加载动画和停留时长。

指标类图表 - 图9

辅助信息:

  • 数据标签:设置是否显示类目标签或数值标签,以及设置标签样式、类目标签和数值标签。

指标类图表 - 图10

卡片设置:设置卡片的标题、边框、阴影、背景等样式。

指标类图表 - 图11

仪表图

仪表图的入口如下。

指标类图表 - 图12

仪表图的的数据配置区如下图所示。

  • 数值:设置仪表图的度量字段,如下图所示为“数量”。

指标类图表 - 图13

仪表图的样式设置,分为图形和卡片设置两个子Tab。

图形设置:

  • 数值:设置仪表图是否显示数值,以及设置数据样式。
  • 刻度:设置仪表图是否显示刻度,以及设置数值范围、分段数、刻度线以及刻度标签。
  • 表盘样式:设置仪表图是否显示表盘样式,以及设置内半径、外半径、指针、中心原点、表盘颜色。

指标类图表 - 图14

卡片设置:设置卡片的标题、边框、阴影、背景等样式。

指标类图表 - 图15

翻牌器

翻牌器的入口如下。 指标类图表 - 图16

翻牌器的数据配置区如下图所示。

  • 数量:设置翻牌器的度量字段,如下图所示为“数值”。

指标类图表 - 图17

翻牌器的样式设置,分为图形、卡片设置两个子Tab。

图形设置:

  • 指标名称:设置翻牌器是否显示指标名称,以及名称、文字样式、字距、对齐、距离。
  • 动画效果:设置动画效果。
  • 数据格式:设置数据类型。
  • 翻牌文本:设置类型、外框宽高、数字样式、文字样式、背景样式、边框样式、前缀和后缀。

指标类图表 - 图18

卡片设置:设置卡片的标题、边框、阴影、背景等样式。

指标类图表 - 图19

百分比条

百分比条组件的入口如下。 指标类图表 - 图20

百分比条的数据配置区如下图所示。

  • 当前值:设置百分比条的当前值,为度量字段,如下图所示为“利润”。
  • 最小值:设置百分比条的最小值,为度量字段。
  • 最大值:设置百分比条的最大值,为度量字段,如下图所示为“销售额”。

指标类图表 - 图21

百分比条的样式设置,分为图形和卡片设置两个子Tab。

图形设置:

  • 进度条:设置高度、背景扩展、值颜色、背景颜色、圆角。
  • 指标标签:设置显示内容、标签样式和标签位置。
  • 头部图标:设置形状、尺寸、颜色和位置。
  • 刻度:设置分段数、极值、文字样式和位置。
  • 刻度线:设置线型、长度、粗细和颜色。

指标类图表 - 图22

卡片设置:设置卡片的标题、边框、阴影、背景等样式。

指标类图表 - 图23

百分比条支持添加参考线子组件,下面将介绍参考线子组件的配置。

参考线子组件

参考线子组件的数据配置区如下图所示。

  • 参考线值:设置参考线的数值,如下图所示为“中线”。

指标类图表 - 图24

图形设置:

  • 刻度标签:设置文字样式和位置。
  • 刻度线:设置线型、长度、粗细和颜色。

指标类图表 - 图25