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' ],
    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: {
      custom: true,
      position: 'top',
      items: [
        {
          value: 'submit',
          name: '提交巡检',
          marker: { symbol: 'square', style: { fill: '#B5C4B1', r: 5 } }
        },
        {
          value: 'rectifyed',
          name: '完成整改',
          marker: { symbol: 'square', style: { fill: '#D8CAAF', r: 5 } }
        },
        {
          value: 'bill',
          name: '整改占总数比例',
          marker: { symbol: 'square', style: { fill: '#A06666', r: 5 } }
        }
      ]
    }
  }
  return <DualAxes {...config} />
}

export default memo(ColumnChart)