复现Ant Design 分析页的第四天（Day：30）

[XJQ124]

复现分析页

进度：80%

1、今天修复了昨天关于排序的bug，线上热门搜索部分写完了

补充了两个部分，一个是升降序，一个是生出随机数据 升降序：

const RandomData = () => {

    const data = [];
    for (let i = 1; i <= 50; i++) {
        const randomUsers = Math.floor(Math.random() * 1000) + 1;
        const randomPrice = (Math.random() * 100).toFixed(2) + '%';
        data.push({
            key: `${i}`,
            ranking: `${i}`,
            search: `搜索关键词-${i}`,
            users: randomUsers,
            price: randomPrice,
        });
    }
    return data;
};
const data = RandomData();

const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
};

排序

 {
        title: '用户数',
        dataIndex: 'users',
        sorter: {
            compare: (a, b) => a.users - b.users,
            multiple: 2,
        },
    },
    {
        title: '周涨幅',
        dataIndex: 'price',
        sorter: {
            compare: (a, b) => {
                const numA = parseFloat(a.price);
                const numB = parseFloat(b.price);
                return numA - numB;
            },
            multiple: 1,
        },

2、销售额部分

import { Card, Divider, Dropdown, Segmented } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
import { Pie } from '@ant-design/plots';
import { useState } from "react";

const items = [
    {
        key: '1',
        label: (
            <>
                操作一
            </>
        ),
    },
    {
        key: '2',
        label: (
            <>
                操作二
            </>
        ),
    },
];

const Sales = () => {
    const [Channel, setChannel] = useState('全部渠道');
    const dataMappings = {
        '全部渠道': [
            { type: '其他', value: 1231 },
            { type: '母婴产品', value: 1231 },
            { type: '服饰箱包', value: 2341 },
            { type: '个户健康', value: 3113 },
            { type: '食品酒水', value: 3321 },
            { type: '家用电器', value: 4544 },
        ],
        '线上': [
            { type: '其他', value: 111 },
            { type: '母婴产品', value: 121},
            { type: '服饰箱包', value: 41 },
            { type: '个户健康', value: 311 },
            { type: '食品酒水', value: 321 },
            { type: '家用电器', value: 244 },
        ],
        '门店': [
            { type: '其他', value: 65 },
            { type: '母婴产品', value: 255 },
            { type: '服饰箱包', value: 344 },
            { type: '个户健康', value: 188 },
            { type: '食品酒水', value: 99 },
            { type: '家用电器', value: 65 },
        ],
    };

    const handleChange = (channel) => {
        setChannel(channel);
    };

    const DemoPie = () => {
        const config = {
            data: dataMappings[Channel],
            angleField: 'value', // 指定数值字段，用于确定扇形角度
            colorField: 'type',// 指定颜色字段，用于区分不同分类
            radius: 1,
            innerRadius: 0.7,

        };
        return <Pie {...config} />;
    };

    return (
        <div>
            <Card style={{
                height: 670,
                width: 650,
                left:'700px',
                marginTop: '-670px',
                marginLeft: '30px',
                marginRight: '30px',
            }}>
                <div style={{ fontWeight: 'bold', fontSize: '16px' }}>
                    销售额类别占比
                    <Segmented options={['全部渠道', '线上', '门店']} size="middle" style={{ position: 'absolute', top: '20px', right: '90px' }} onChange={handleChange} />
                    <Divider/>

                    <Dropdown menu={{
                        items,
                    }}>
                        <EllipsisOutlined style={{ position: 'absolute', top: '30px', right: '50px' }} />
                    </Dropdown>
                </div>

                <div>销售额</div>
                <div>
                    <DemoPie />
                </div>
            </Card>
        </div>
    )

}
export default Sales

截图：

存在的问题：中间的文字始终无法消除，明天我再改

明日任务：修改今天的bug，完成最后一个部分