dashboard/src/components/Waterfall.jsx

import { observer } from 'mobx-react';
import { Waterfall } from '@ant-design/plots';
import { dataFieldAlias } from './../libs/ht';
import { merge } from '../utils/commons';

export default observer((props) => {
  const { dataSource, line, title, ...extProps } = props;
  const yMax = (Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField])))*10;
  console.log(title, 'title waterfall', yMax);
  const annotationsLine = line
    ? [
        {
          type: 'text',
          position: ['start', line.value],
          content: `${line.label} ${line.value / 1000} K`,
          // offsetX: -15,
          style: {
            fill: '#F4664A',
            textBaseline: 'bottom',
          },
        },
        {
          type: 'line',
          start: [-10, line.value],
          end: ['max', line.value],
          style: {
            stroke: '#F4664A',
            lineDash: [2, 2],
          },
        },
      ]
    : [];

  const config = merge({
    padding: 'auto',
    appendPadding: [20, 0, 0, 0],

    /** 展示总计 */
    total: {
      // label: `${title}总`,
      label: `${title}总`,
      style: {
        fill: '#96a6a6',
      },
    },
    legend: false,
    /** 数据标签展示模式：绝对值 */
    labelMode: 'absolute',
    label: {
      style: {
        fontSize: 12,
      },
    },
    annotations: [...annotationsLine],
    meta: {
      [extProps.yField]: {
        max: Math.ceil(yMax / 0.95),
        alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
        formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
      },
    },
    xAxis: {
      type: 'cat',
    },
    tooltip: {
      customItems: (originalItems) => {
        // process originalItems,
        const items = originalItems.map((ele) => ({ ...ele, title: `${ele.title} ${ele.data.groupsLabel}`, name: dataFieldAlias[ele.name]?.alias || ele.name }));
        return items;
      },
    },
  }, extProps);
  return (
    <>
      <Waterfall {...config} data={dataSource} />
    </>
  );
});