瀑布图

[配置项]

简介

瀑布图以柱状形式表示数值的累计过程，常用于分析和解释各项数据变化累计影响的结果，例如收入或支出的来源和变化因素。

图表构成

瀑布图由柱状图元、引导线图元、坐标轴及其他组件构成。

矩形图元为瀑布图的基本要素，相关的绘制配置必不可少:

waterfallChart.type: 图表类型，瀑布图的类型为'waterfall'
waterfallChart.data: 图表绘制的数据源
waterfallChart.xField: 分类字段，映射矩形图元的 x 坐标或宽度
waterfallChart.yField: 数值字段，映射矩形图元的高度或 y 坐标
waterfallChart.total: 用于配置图表计算的总计数据对应的矩形图元，详细配置见waterfallChart.total

坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能：

waterfallChart.axes: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详细配置见VChart 坐标轴组件配置
waterfallChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart waterfallChart 配置

快速上手

瀑布图特性

数据

一个离散 字段，如: product
一个数值字段，如: sales

一组产品类别和销售额的数据定义如下：

data: [
  {
    name: 'bar',
    values: [
      {
        product: '数码产品',
        sales: 20
      },
      {
        product: '日用品',
        sales: 50
      },
      {
        product: '食品',
        sales: 80
      }
    ]
  }
];

数据与布局

瀑布图是一种显示数值流动或累积变化的图表，在 VChart 中提供三种累积值的绘制方式:

在末尾增加总计信息，并绘制总计图元
指定某个字段为总计信息，并将其视作总计图元
自定义总计

在末尾增加总计信息，并绘制总计图元

通过waterfallChart.total.type: 'end'可以在末尾追加统计信息。具体配置如下:

waterfallChart.total.type: 'end' 声明统计方式
waterfallChart.total.text声明统计文本

指定某个字段为总计信息，并将其视作总计图元

通过waterfallChart.total.type: 'field'可以指定某个字段为总计信息，并将其视作总计图元。具体配置如下:

waterfallChart.total.type: 'field' 声明统计方式
waterfallChart.total.tagField声明总计值的标志位，对应field的值为true时，认为这条数据是总计数据
waterfallChart.total.valueField可以指定总计值
waterfallChart.total.startField可以指定总计起点
waterfallChart.total.collectCountField可以指定总计计算前n个维度的字段，比如该字段指定为'collect'，那么在被识别为总计的那条数据中'collect'字段读到的就这个n。

自定义总计计算方式

通过waterfallChart.total.type: 'custom'可以指定自定义计算方式，并将其视作总计图元。具体配置如下:

waterfallChart.total.type: 'custom' 声明统计方式
waterfallChart.total.tagField声明总计值的标志位，对应field的值为true时，认为这条数据是总计数据
waterfallChart.total.product: 总计数据在运算时会调用这个函数，参数为当前总计数据，当前累计信息，需要返回总计的起点值与终点值。回调函数定义如下：

(datum: Datum, current: { start: number; end: number }) => {
  start: number;
  end: number;
};

瀑布图

简介