management/src/pages/Quality/Content/Info/Summary/columnChart.tsx

import React, { memo } from 'react'
import { DualAxes } from '@ant-design/charts'
import { DualAxesConfig } from '@ant-design/charts/es/dualAxes'
import { SafeColumnCharType, SafeLineChartType } from '@/pages/Safe/Content/Info/Summary'
import { dayjsFormat } from '@/utils/util'
// import { SafeColumnCharType, SafeLineChartType } from '.'

interface iColumnChartProps {
  columnData: SafeColumnCharType[]
  lineData: SafeLineChartType[]
}
const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
  const config: DualAxesConfig = {
    data: [ props.data.columnData, props.data.lineData ],
    xField: 'month',
    yField: [ 'count', 'percentage' ],
    padding: [ 20, 20, 60, 30 ],
    xAxis: {
      label: {
        formatter: (val) => dayjsFormat(val, 'YYYY年M月')
      }
    },
    slider: {},
    yAxis: {
      percentage: {
        label: {
          formatter: (val) => `${val} %`
        }
      }
    },
    tooltip: {
      formatter: datum => {
        const obj = { name: '', value: '' }
        if (Object.prototype.hasOwnProperty.call(datum, 'percentage')) {
          obj.name = '整改占总数比例'
          obj.value = datum.percentage + '%'
        } else if (datum.name && datum.name === 'rectifyed') {
          obj.name = '完成整改'
          obj.value = datum.count
        } else {
          obj.name = '提交巡检'
          obj.value = datum.count
        }
        return obj
      }
    },
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'name',
        columnWidthRatio: 0.4,
        color: ({ name }) => {
          if (name === 'rectifyed') {
            return '#D8CAAF'
          }
          return '#B5C4B1'
        },
        label: {}
      },
      {
        geometry: 'line',
        color: '#A06666',
        isStack: true,
        smooth: true
      }
    ],
    legend: {
      position: 'top',
      itemName: {
        formatter: (text: string) => {
          if (text === 'submit') {
            return '提交巡检'
          } else if (text === 'rectifyed') {
            return '完成整改'
          } else {
            return '整改占总数比例'
          }
        }
      }
    }
  }
  return <DualAxes {...config} />
}

export default memo(ColumnChart)