dashboard/src/components/Waterfall.jsx

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

export default observer((props) => {
  const { dataSource, line, title, ...extProps } = props;
  const yMax = Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField]));
  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 = {
    padding: 'auto',
    appendPadding: [20, 0, 0, 0],

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