dashboard/src/components/MixYnQ.jsx

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

const COLOR_SETS = [
  "#FF6B3B",
  "#9FB40F",
  "#76523B",
  "#DAD5B5",
  "#E19348",
  "#F383A2",
];
/**
 * 当期数据; 同比; 环比
 */
export default observer((props) => {
  const { dataSource, summaryData: areaData, ...config } = props;
  const { xField, yFields, seriesField, tooltip, ...extConfig } = config;
  const diffData0 = dataSource.reduce((r, row) => {
    r.push({ ...row, yField: row[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias });
    r.push({ ...row, yField: row.resultToQ[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias + ' 上个时间段' });
    r.push({ ...row, yField: row.resultToY[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias + ' 去年同期' });
    return r;
  }, []);
  const diffData1 = dataSource.reduce((r, row) => {
    r.push({ ...row, yField: row[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias });
    r.push({ ...row, yField: row.resultToQ[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias + ' 上个时间段' });
    r.push({ ...row, yField: row.resultToY[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias + ' 去年同期' });
    return r;
  }, []);
  const diffDataPercent = dataSource.reduce((r, row) => {
    const _key0Q = `${yFields[0]}ToQ`;
    const _key0Y = `${yFields[0]}ToY`;
    r.push({ ...row, yField: row[_key0Q], yGroup: dataFieldAlias[yFields[0]].alias + ' 环比' });
    r.push({ ...row, yField: row[_key0Y], yGroup: dataFieldAlias[yFields[0]].alias + ' 同比' });
    const _key1Q = `${yFields[1]}ToQ`;
    const _key1Y = `${yFields[1]}ToY`;
    r.push({ ...row, yField: row[_key1Q], yGroup: dataFieldAlias[yFields[1]].alias + ' 环比' });
    r.push({ ...row, yField: row[_key1Y], yGroup: dataFieldAlias[yFields[1]].alias + ' 同比' });
    return r;
  }, []);
  const calcAxis = isEmpty(diffData0) ? 300 : (Math.max(...diffData0.map(ele => ele.yField))) * 3;
  const calcAxisC = isEmpty(diffData0) ? 300 : (Math.max(...diffDataPercent.map(ele => ele.yField))) * 3;
  const diffLine = [
    {
      type: 'text',
      position: ['start', 0],
      content: `同比, 环比`,
      offsetX: -15,
      style: {
        fill: COLOR_SETS[0],
        textBaseline: 'bottom',
      },
    },
    {
      type: 'line',
      start: [-10, 0],
      end: ['max', 0],
      style: {
        stroke: COLOR_SETS[0],
        // lineDash: [2, 2],
        lineWidth: 0.5,
      },
    },];
  const MixConfig = {
    appendPadding: 15,
    height: 600,
    syncViewPadding: true,
    tooltip: {
      shared: true,
      // customItems: (originalItems) => {
      //   // process originalItems,
      //   const items = originalItems.map((ele) => ({ ...ele, name: ele.data?.extraLine ? ele.name : `${ele.name} ${dataFieldAlias[yField]?.alias || yField}` }));
      //   return items;
      // },
    },
    legend: {position: 'top',layout: 'horizontal'  },
    plots: [
      {
        type: 'column',
        options: {
          data: diffData0,
          isGroup: true,
          xField,
          yField: 'yField',
          seriesField: 'yGroup',
          // xAxis: false,
          meta: merge({
            ...cloneDeep(dataFieldAlias),
          }),
          // color: '#b32b19',
          // color: '#f58269',
          legend: {},
          smooth: true,
          yAxis: {
            type: 'linear',
            tickCount: 4,
            min: 0,
            max: calcAxis,
            title: { text: '团数', autoRotate: false, position: 'end' },
          },
          xAxis: {
            label: {
              autoHide: false,
              autoRotate: true,
            },
          },
          label: false,
        },
      },
      {
        type: 'line',
        options: {
          data: diffData1,
          isGroup: true,
          xField,
          yField: 'yField',
          seriesField: 'yGroup',
          xAxis: false,
          legend: {},
          meta: merge(
            {
              ...cloneDeep(dataFieldAlias),
            },
            { yField: dataFieldAlias[yFields[1]] }
          ),
          // color: '#1AAF8B',
          smooth: true,
          point: {
            size: 4,
            shape: 'cicle',
          },
          yAxis: {
            type: 'linear',
            // tickCount: 4,
            min: 0,
            position: 'right',
            line: null,
            grid: null,
            title: { text: '业绩', autoRotate: false, position: 'end' },
          },
          label: {
            style: {
              fontWeight: 700,
              stroke: '#fff',
              lineWidth: 1,
            },
          },
        },
      },
      {
        type: 'column',
        options: {
          data: diffDataPercent,
          xField,
          yField: 'yField',
          seriesField: 'yGroup',
          columnWidthRatio: 0.28,
          meta: {
            yField: {
              formatter: (v) => `${v}%`,
            },
          },
          isGroup: true,
          xAxis: false,
          yAxis: {
            line: null,
            grid: null,
            label: false,
            position: 'left',
            // min: -calcAxisC,
            // max: calcAxisC/4,
            min: -3000,
            max: 250,
            tickCount: 4,
          },
          legend: {},
          color: COLOR_SETS,
          annotations: diffLine,
        },
      },
    ],
  };
  return <Mix {...MixConfig} />;
});