You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.7 KiB
67 lines
1.7 KiB
import { Pie } from '@ant-design/plots';
|
|
import { Card, Segmented, Typography } from 'antd';
|
|
import numeral from 'numeral';
|
|
import React from 'react';
|
|
import type { DataItem } from '../data.d';
|
|
import useStyles from '../style.style';
|
|
|
|
const { Text } = Typography;
|
|
const ProportionSales = ({
|
|
dropdownGroup,
|
|
salesType,
|
|
loading,
|
|
salesPieData,
|
|
handleChangeSalesType,
|
|
}: {
|
|
loading: boolean;
|
|
dropdownGroup: React.ReactNode;
|
|
salesType: 'all' | 'online' | 'stores';
|
|
salesPieData: DataItem[];
|
|
handleChangeSalesType?: (value: 'all' | 'online' | 'stores') => void;
|
|
}) => {
|
|
const { styles } = useStyles();
|
|
return (
|
|
<Card
|
|
loading={loading}
|
|
className={styles.salesCard}
|
|
variant="borderless"
|
|
title="销售额类别占比"
|
|
style={{
|
|
height: '100%',
|
|
}}
|
|
extra={
|
|
<div className={styles.salesCardExtra}>
|
|
{dropdownGroup}
|
|
<Segmented
|
|
className={styles.salesTypeRadio}
|
|
value={salesType}
|
|
onChange={handleChangeSalesType}
|
|
options={[
|
|
{ label: '全部渠道', value: 'all' },
|
|
{ label: '线上', value: 'online' },
|
|
{ label: '门店', value: 'stores' },
|
|
]}
|
|
size="middle"
|
|
/>
|
|
</div>
|
|
}
|
|
>
|
|
<Text>销售额</Text>
|
|
<Pie
|
|
height={340}
|
|
radius={0.8}
|
|
innerRadius={0.5}
|
|
angleField="y"
|
|
colorField="x"
|
|
data={salesPieData as any}
|
|
legend={false}
|
|
label={{
|
|
position: 'spider',
|
|
text: (item: { x: number; y: number }) =>
|
|
`${item.x}: ${numeral(item.y).format('0,0')}`,
|
|
}}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
export default ProportionSales;
|
|
|