复现Ant Design Pro第五天（Day：31）

[XJQ124]

任务：复现分析页

进度：90%

1、转化的部分

    import React from "react";
    import { Card, Tabs, Progress } from "antd";
    import { Line } from '@ant-design/plots';
    import { useState,useEffect } from "react";
    //折线部分
    const DemoLine = () => {
        const [data, setData] = useState([]);
        useEffect(() => {
            asyncFetch();
        }, []);

        const asyncFetch = () => {
            // 从本地加载数据
            import('./Data.json')
                .then((json) => setData(json.default))
                .catch((error) => {
                    console.log('fetch data failed', error);
                });
        };
        const config = {
            data,
            xField: 'time',
            yField: 'number',
            seriesField: 'distinction',//区分不同的折线
            xAxis: {
                //X周上的刻度数量
                tickCount: 20,
            },
            //折线图下面的滑块
            slider: {
                start: 0,
                end: 1,
            },
        };

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

    const Transformation = () => {
        return (
            <div>
                <Card style={{
                    width: 'auto',
                    height: 'auto',
                    marginTop: '20px',
                    marginLeft: '30px',
                    marginRight: '30px',
                }}>
                    <Tabs
                        //默认展示的标签页
                        defaultActiveKey="1"
                        style={{
                            height: 220,
                        }}
                        items={new Array(30).fill(null).map((_, i) => {
                            const id = String(i);
                            return {
                                label: `Stores ${id}`,
                                key: id,
                                disabled: i === 30,
                            };
                        })}
                    />
                    <div>
                        <Progress strokeLinecap="butt" type="circle" percent={75} showInfo={false} />
                    </div>
                    <DemoLine />
                </Card>
            </div>
        )
    }

    export default Transformation

这部分折线图部分今天终于搞好了，就是上面的进度条后面想办法把它放进Tabs就行

2、目前存在的bug总结（周末争取修复）

1、整个网页实现拖拽样式不变 2、小折线图的样式问题 3、销售部分的今天，本周，本月，本年的功能问题 4、环图中间的问题消除问题 5、环图的动画与分析页实际不一致 6、环图的切换按钮的样式问题 7、Tabs和进度图的包容问题，，，

好吧，问题有点多，我周末慢慢修复