图表组件应用

| 收藏

图表类组件包括用以趋势分析类的折线图，堆叠面积图，累积图；比较分析类的柱图，堆叠柱图，百分比柱图；分布类的环图，饼图，词云图；关系分析类的漏斗图，以及显示指标状态的指标卡与仪表盘图，具体如下：

1.1. 折线图

折线图是由一些点和线组成的统计图表，用于分析事物随时间或有序类别而变化的趋势，也可用于分析多组数据随时间变化或有序类别的相互作用和影响

1.1.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，折线图的数据配置需要一个连续时间字段或一个分类字段（维度）和至少一个连续数据字段（指标）。详见下图：

1.1.2. 样式配置

1.1.2.1. 指标与维度的显示配置

• 指标显示配置，在折线图配置多个指标后，可分别针对每个指标所展示的左右Y轴位置做选择，折线图的样式可选择实线与虚线
• 维度显示配置，限制维度下的分组显示的数量。显示数量需要为 1 到 1000 以内的整数，如下图：

1.1.2.2. 坐标轴配置

折线图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，折线图的Y轴支持自定义轴区间，使得纵坐标折线能更好的凸显实际的业务波动，如下图：

1.2. 堆叠面积图

堆叠面积图用于展示多个类别数据随时间或其他连续变量的变化趋势，并比较各类别数据之间的占比关系

1.2.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，堆叠面积图的数据配置需要一个连续时间字段或一个分类字段（维度）和至少一个连续数据字段（指标）。详见下图：

1.2.2. 样式配置

1.2.2.1. 指标与维度的显示配置

• 指标显示配置，在堆叠面积图配置多个指标后，可分别针对每个指标所展示的左右Y轴位置做选择，且也可以选择是否展示数据标签
• 维度显示配置，限制维度下的分组显示的数量，显示数量需要为 1 到 1000 以内的整数，如下图：

1.2.2.2. 坐标轴配置

堆叠面积图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改。Y轴支持自定义轴区间，使得纵坐标折线能更好的凸显实际的业务波动，如下图：

1.3. 累积图

累积图用于展示多个类别数据随时间的总量累积变化情况，并比较各类别数据之间的差异

1.3.1. 数据配置

将数值与维度字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，累积图的数据配置需要一个连续时间字段或一个分类字段（维度）和至少一个连续数据字段（指标），详见下图：

1.3.2. 样式配置

1.3.2.1. 指标与维度的显示配置

• 指标显示配置，在累积图配置多个指标后，可分别针对每个指标所展示的左右Y轴位置做选择，且可以选择标签间隔数量来显示数据标签，支持对折线的虚实做切换
• 维度显示配置，限制维度下的分组显示的数量，显示数量需要为 1 到 1000 以内的整数，如下图：

1.3.2.2. 坐标轴配置

累积图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，且支持选择显示缩略轴，如下图：

1.4. 柱状图

柱状图由一组垂直或水平的长方形柱子组成，每个柱子的高度或长度表示相应数据的数量或比例，常用于比较不同组别与类别之间的数据

1.4.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，折线图的数据配置需要一个分类字段（维度）和至少一个数据字段（指标），详见下图：

1.4.2. 样式配置

1.4.2.1. 维度指标显示配置

• 指标显示配置，在柱状图配置多个指标后，可分别针对每个指标所展示的左右Y轴位置做选择，图中柱子的样式可选择不透明与半透明
• 维度显示配置，限制维度下的分组显示的数量。显示数量需要为 1 到 1000 以内的整数，如下图：

1.4.2.2. 坐标轴配置

柱状图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，柱状图的Y轴支持自定义轴区间，使得柱子的高低能更好的凸显实际的业务波动，如下图：

1.5. 堆叠柱状图

堆叠柱图可以直观展示一个大分组下各个小分组的数值，体现局部数据与整体之间的关系

1.5.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，堆叠柱图的配置X 轴上至少选择两个维度，Y 轴上至少选择一个指标，如下图：

1.5.2. 样式配置

1.5.2.1. 维度指标显示配置

堆叠柱状图的坐标轴上的数据标签显示可选单独配置与全局智能，具体如下图：

1.5.2.2. 坐标轴配置

堆叠柱图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，柱状图的Y轴支持自定义轴区间，使得柱子的高低能更好的凸显实际的业务波动，如下图：

1.6. 百分比堆叠柱状图

百分比堆叠柱图展示的是一个大分组下各个小分组的占比，体现局部数据与整体之间的关系

1.6.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，百分比堆叠柱图的配置X 轴上至少选择两个维度，Y 轴上至少选择一个指标，如下图：

1.6.2. 样式配置

1.6.2.1. 维度指标显示配置

1.6.2.2. 坐标轴配置

堆叠柱图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，支持选择缩略轴，如下图：

1.7. 线柱组合图

线柱组合图每个指标可以选择显示为折线图或柱状图，适用于展示一段时间内不同指标的数值趋势变化支持左右双轴展示不同量级的数据

1.7.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，线柱组合图的X 轴上至少选择一个维度，Y 轴上选择多个指标，如下图：

1.7.2. 样式配置

1.7.2.1. 维度指标显示配置

• 指标显示配置，在线柱组合图配置多个指标后，可分别针对每个指标所展示的柱子/折线做样式选择，折线可选虚实，柱子可选透明度
• 维度显示配置，限制维度下的分组显示的数量，显示数量需要为 1 到 1000 以内的整数，如下图：

1.7.2.2. 坐标轴配置

线柱组合图的横纵坐标轴均可显示坐标轴标题，且支持轴标题自定义修改，Y轴支持自定义轴区间，使得柱子与折线能更好的凸显实际业务数据的层次感，增强数据可读性，如下图：

1.8. 环形图

环图适用于展示不同分类变量的占比关系，相对于饼图更适合展示多个分类变量，通常展示不超过6个类别

1.8.1. 数据配置

环形图的配置需要一个分类数据字段（维度），一个连续数据字段（指标），且在饼图使用的语境下，分类数据字段应当构成一个整体（例如下图分析师，普通用户，管理员，用户运营构成了整个用户角色），而不能是独立无关的，详见下图：

1.8.2. 样式配置

• 指标显示配置：环图仅支持配置一个指标，可选择是否在图中显示数据标签
• 维值显示配置：饼图分割的最大数量

1.9. 饼图

饼图适用于展示单个分类变量的占比关系，通常展示不超过6个类别，

1.9.1. 数据配置

饼图的配置需要一个分类数据字段（维度），一个连续数据字段（指标），详见下图：

1.9.2. 样式配置

• 指标显示配置：饼图仅支持配置一个指标，可选择是否在图中显示数据标签
• 维值显示配置：选择饼图分割的最大数量

1.10. 漏斗图

漏斗图可以分析具有规范性、周期长和环节多的业务流程。通过漏斗图比较各环节业务数据，能够直观地发现问题。漏斗图还可以展示各步骤的转化率，适用于业务流程多的流程分析，例如通过漏斗图可以清楚地展示用户从进入网站到实现购买的最终转化率。下述为您介绍如何为对比漏斗图添加数据并配置样式。

1.10.1. 图形概述

1、使用场景：

• 适用于业务流程比较规范、周期长、环节多的流程类分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。

• 漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。

• 漏斗图从上到下，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况。

2、配置方式：漏斗图由维度、指标、对比维度字段组成

• 1个维度，1个指标，0个对比维度
• 0个维度，1个或多个指标，0个或1个对比维度

3、效果图示例：

1.10.2. 数据配置

多步骤漏斗

• 在数值列表中，找到目标字段，拖拽至漏斗步骤区域
• 在维度列表中，找到国家，拖拽至对比维度区域

单维度漏斗：

• 在维度列表中，找到流程进展，拖拽至维度区域

• 在数值列表中，找到数量，拖拽至漏斗步骤区域

1.10.3. 样式配置

漏斗图的样式配置较为简单，漏斗图支持配置能力，如下图所示：

• 显示数量
• 图例标签显示
• 主题颜色配置

1.11. 词云图

词云图一般用于展示高频词汇，或其他需要重点突出的词汇

1.11.1. 数据配置

将数值区与维度区的字段拖往对应的配置区后，右侧图表预览区会自动进行渲染，词云图选择一个字段作为文本内容进行展示，选择一个字段作为计算文本大小的依据，如下图：

1.11.2. 样式配置

词云图的样式配置较为简单，词云图的样式配置支持图例的显示数量显示与主题颜色配置，如下图所示我们选择混合色：

1.12. 仪表盘

仪表盘可用于观察某指标在区间内的位置、进度

1.12.1. 数据配置

选择一个指标作为观察对象，设置初始值和目标值为观察区间，如下图：

1.12.2. 样式配置

仪表盘的样式配置较为简单，支持图例标签的显示与主题颜色配置，如下图所示：

1.13. 指标卡

指标卡可用来展示指标在当前阶段的数值和涨跌状况

1.13.1. 数据配置

指标卡的数据配置选择一个指标即可，用于展示指标值和同环比，如下图：

1.13.2. 样式配置

指标卡的样式配置较为简单，支持自定义标题显示，当前查询时间范围的显示，指标名称的显示，以及涨跌颜色风格的颜色切换，如下图：

1.14. 指标趋势图

指标趋势图由指标卡与线图组成，可用于展示多个指标最新日期的数据或阶段汇总数据，以及指标在某一段时间内的变化趋势。

1.14.1. 图表概述

1、使用场景：多用于某时间段指标数据及趋势等场景，可通过指标的变化快速判断是否有经营异常。

2、配置方式：指标趋势图由时间维度和指标字段组成。

• 日期由数据的维度决定，只能选择1个时间类型的维度字段。例如订单日期（day）
• 指标由数据的度量决定，至少需要1个指标。例如订单数量和订单金额

3、优势介绍：

• 计算能力：一键配置高级计算同环比
• 可视化效果：支持两种趋势布局效果与指标展示方式
• 分析能力：支持使用时间标注等高阶分析能力

4、效果图示例

1.14.2. 数据配置

选择字段配置完成指标趋势图后，如下图所示，主要分为以下几个配置能力：

1、字段配置：在字段解析区域，选择需要的维度字段和度量/指标字段：

• 在维度列表中，选择1个时间字段「订单日期」，拖动至日期/维度区域。
• 在度量列表中，选择多个数值字段，「订单数量，订单金额，运输成本和利润金额」，依次拖动至指标区域。

2、指标卡取数范围：

• 阶段性汇总数据：表示指标卡显示的数值为区间汇总的数据；
  例如时间区间选择2021-01-04 至 2021-02-01时，指标卡展示的数据为此时间区间的汇总计算结果；
  例如时间区间选择「过去7天」时，指标卡展示的数据会随当前时间动态更新计算结果；
• 最新日期数据：表示指标卡显示的数值为当前选取的时间区间内，最新时间点的数据；
  例如时间区间选择2021-01-04 至 2021-02-01时，指标卡展示的数据为2021-02-01的指标数值；
  例如时间区间选择「过去7天」时，指标卡展示的数据为「过去1天」对应计算结果，并且会随当前时间动态更新计算结果。

3、同环比：

• 同比：指标卡的取数范围选择「最近日期数据」时，支持配置当前指标的同比，支持「默认」与「自定义」两种方式
• 环比：根据时间字段的粒度不同，环比的计算能力有所区别，支持「默认」与「自定义」两种方式，详情可参考：同环比；

1.14.3. 样式配置

支持对配置得到的指标趋势图样式进行调整，如下图所示，主要分为以下几个配置能力：

1、标题配置

• 标题：配置当前图表的名称
• 时间范围：是否展示当前时间范围

2、指标卡样式配置

3、趋势图样式配置

• 注意：仅当选择为「整体布局」时才会出现该选项。

1. 指标配置：
   1. 展示Y轴：主轴（左侧）、次轴（右侧）
   2. 样式：实线、虚线
   3. 是否显示数据标签
2. 图例项：
   1. 是否显示图例
   2. 显示位置：上方、下方、左侧、右侧
3. 缩略轴：是否显示缩略轴
4. 坐标X轴：
   1. 是否显示坐标轴标题
   2. 名称
   3. 单位
5. 坐标Y轴：
   1. 最大值
   2. 最小值
   3. 是否包含0
   4. 是否显示坐标轴标题
   5. 名称
   6. 单位

4、备注：支持对当前图表内容进行追加描述或额外补充信息。

1.14.4. 分析配置

支持时间标注能力，如下图所示：

• 对图表中的时间信息作标记，常用于标记 节假日、周末、运营活动等，作为图表分析过程的辅助说明

• 可通过管理中心创建具体的时间标注，并在图表中选择应用

1.15.  趋势分析表

趋势分析表由趋势分析图和趋势分析明细表组成，您可以通过趋势分析图查看指标的宏观趋势，然后通过趋势分析表查看指标详情，帮助您更好的分析决策。

1.15.1. 图表概述

1、使用场景：常用于宏观指标的分析，可以分析年度、季度、月度、周、天的数据，并可以对单个指标进一步的对比、趋势分析。

2、配置方式：图是分析表由时间维度和指标字段组成。

• 指标：最少选择1个度量。

• 日期：数据的日期维度决定，只能选择1个维度，且必须是日粒度字段。

3、效果图示例

1.15.2. 数据配置

选择字段配置完成指标趋势图后，在字段解析区域，选择需要的维度字段和度量/指标字段，如下图所示：

• 在维度列表中，选择1个时间字段，拖动至日期/维度区域，仅支持使用日粒度；
• 在度量列表中，选择多个数值字段，依次拖动至指标区域。

1.15.3. 样式配置

支持对配置得到的指标趋势图样式进行调整，如下图所示，主要分为以下几个配置能力：

1、标题配置

• 标题：配置当前图表的名称
• 时间范围：是否展示当前时间范围

2、日期范围配置

• 默认截止时间：
  • 动态时间：默认为T-1
  • 自定义时间：默认为「今天」
• 自定义展示日期的粒度：支持年、季、月、周、天，并支持自定义展示范围

3、计算方式

• 常规计算：按照指标配置的聚合方式，在某一粒度下的日期范围内进行聚合计算，适合应用在分析一定时间范围内数据变化情况的场景

4、同环比

• 默认计算方式：年同比/环比
• 对比期数：自定义同环比的对比期数，例如天的去年同比期数 = 1，天的前年同比期数 = 2
• 计算类型：差值百分比/比值百分数；具体区别请参考同环比计算逻辑；
• 同环比颜色：绿涨红跌/红涨绿跌

5、趋势分析

• 开启趋势图后，展示趋势图入口，点击后可进入趋势图弹窗，如下图所示
• 趋势图默认展示粒度：日、月
• 默认展示时间范围：
  • 截止日期往前365天
  • 自定义时间区间
• 数据对比情况：选择后此数据可在趋势图弹窗中支持显示、隐藏
  • 周同比数据
  • 月同比数据
  • 年同比数据
  • 环比数据

6、表格配置

• 默认列宽
• 自定义列宽

7、备注：支持对当前图表内容进行追加描述或额外补充信息。

1.15.4. 分析配置

支持时间标注能力，如下图所示：

• 对图表中的时间信息作标记，常用于标记 节假日、周末、运营活动等，作为图表分析过程的辅助说明

• 可通过管理中心创建具体的时间标注，并在图表中选择应用