自定义系列：瀑布图

v0.5.0+

图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。

同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。

信息

瀑布图的实现并非是真正意义上的自定义系列，而是基于堆叠柱状图进行扩展开发支持。

使用

为了简化接入过程，提供辅助类来完成业务数据到瀑布图组件数据的解析，然后利用解析后的数据集以使用堆叠柱状图的方式配置图表即可。

import { helper } from 'thsc-datav-standard-chart';

// input: [[]]
// output: [[], []]
const dataset = helper.WaterfallHelper.transformDataset(data);

由于支持堆叠瀑布图，所以输入的业务数据集格式为二维数组：

type Input = [
  [number, { value: number }, { value: number, __segmentStart?: boolean; }, number, number, ...],  // 第一个堆叠数据集
  [number, number, number, number, number...],  // 第二个堆叠数据集
  // ...
]

输出也为二维数组，作为堆叠柱状图的数据集进行配置。

提示

输入的数据集中，支持纯数字、对象两种格式。

其中，若为对象格式时，还支持 __segmentStart 字段来标记分段瀑布图的起点。

分段瀑布图：即假设有 5 根柱子时，可让前 3 根柱子构成一个瀑布图，再让后 3 根柱子构成一个瀑布图，实现分段效果。

实时调试预览

其它瀑布图相关组件示例可在组件示例平台搜索瀑布图查看。

自定义配置项

以下配置项只在 series.type: 'bar' 且 series.dvType: 'waterfall' 时有效。

series.dvReferenceLine

• 类型

  {
    /** 是否显示，默认 false */
    show?: boolean;
    /** 线的颜色，默认 gray */
    color?: string;
  }

v0.5.0+

配置瀑布图的相邻柱子间参考线。

示例：

{
  type: 'bar',
  dvType: 'waterfall',
  stack: 'waterfall'
  dvReferenceLine: {
    show: true,
    color: 'gray',
  },
}

series.dvDirectionLine

• 类型

  {
    /** 是否显示，默认 false */
    show?: boolean;
    /** 线的颜色，默认 gray */
    color?: string;
    /** 方向，朝上或者朝下 */
    direction: 'top' | 'bottom';
  }

v0.5.0+

配置瀑布图柱子中带箭头的方向指引线。

示例：

{
  type: 'bar',
  dvType: 'waterfall',
  stack: 'waterfall'
  dvDirectionLine: {
    show: true,
    color: 'gray',
    direction: 'top'
  },
  data: [
    {
      value: 1,
      dvDirectionLine: {
        show: true,
        color: 'gray',
        direction: 'top'
      },
    }
  ]
}