复现Antd Pro的分析页(Day:27)

[XJQ124]

任务：复现Antd Pro的分析页

进度：25%

1、先确定四个Card

  import React from "react";
  import { Card, Divider, Dropdown,Menu } from 'antd';
  import { InfoCircleOutlined,CaretUpOutlined,CaretDownOutlined } from '@ant-design/icons';
  import DemoArea from "./Area";
  import DemoColumn from "./Column";
  import DemoProgress from "./Progress";
  const App = () => (
    <div style={{ display: 'flex' }}>
      <Card
        style={{
          width: 250,
          marginTop: '20px',
          marginLeft: '30px',
        }}
      >
        <div style={{ color: 'gray', fontSize: 13, fontWeight: 'bold' }}>
          总销售额
          <Dropdown
            overlay={
              <Menu  >
                <Menu.Item key="instructions">指标说明</Menu.Item>
              </Menu>
            }
            placement="top"
            arrow
          >
          <InfoCircleOutlined style={{ marginLeft: '130px' }} />
          </Dropdown>
        </div>
        <div style={{ fontSize: 25, }}>¥126,560 </div>

        <p>周同比 12% <CaretUpOutlined style={{ color: 'red' }} />&nbsp;&nbsp;&nbsp;日同比 11% <CaretDownOutlined style={{ color: 'lime' }} /> </p>
        <Divider />
        <>日销售额&nbsp; &nbsp;¥12,423 </>
      </Card>

      <Card
        style={{
          width: 250,
          marginTop: '20px',
          marginLeft: '30px',
        }}
      >
        <div style={{ color: 'gray', fontSize: 13, fontWeight: 'bold' }}>
          访问量
          <Dropdown
            overlay={
              <Menu  >
                <Menu.Item key="instructions">指标说明</Menu.Item>
              </Menu>
            }
            placement="top"
            arrow
          >
            <InfoCircleOutlined style={{ marginLeft: '130px' }} />
          </Dropdown>
        </div>
        <div style={{ fontSize: 25, }}>8,846 </div>

          <DemoArea />

        <Divider />
        <div>日访问量&nbsp;&nbsp;1,234</div>
      </Card>

      <Card
        style={{
          width: 250,
          marginTop: '20px',
          marginLeft: '30px',
        }}
      >
        <div style={{ color: 'gray', fontSize: 13, fontWeight: 'bold' }}>
          支付笔数
          <Dropdown
            overlay={
              <Menu  >
                <Menu.Item key="instructions">指标说明</Menu.Item>
              </Menu>
            }
            placement="top"
            arrow
          >
            <InfoCircleOutlined style={{ marginLeft: '130px' }} />
          </Dropdown>
        </div>
        <div style={{ fontSize: 25, }}>6,560 </div>

        <DemoColumn />
        <Divider />
        <div>转换率&nbsp;&nbsp;60%</div>
      </Card>

      <Card
        style={{
          width: 250,
          marginTop: '20px',
          marginLeft: '30px',
        }}
      >
        <div style={{ color: 'gray', fontSize: 13, fontWeight: 'bold' }}>
          运营活动效果
          <Dropdown
            overlay={
              <Menu  >
                <Menu.Item key="instructions">指标说明</Menu.Item>
              </Menu>
            }
            placement="top"
            arrow
          >
            <InfoCircleOutlined style={{ marginLeft: '130px' }} />
          </Dropdown>
        </div>
        <div style={{ fontSize: 25, }}>78% </div>

        <DemoProgress />
        <Divider />
        <p>周同比 12% <CaretUpOutlined style={{ color: 'red' }} /> &nbsp;&nbsp;&nbsp;日同比 11% <CaretDownOutlined style={{ color: 'lime' }} /> </p>
      </Card>

    </div>

    );

  export default App;

2、折线图部分

import React, { useState,} from 'react';
import { Area } from '@ant-design/plots';

const DemoArea = () => {
    const [data,] = useState([
        { timePeriod: '2023-12-18', y: 6 },
        { timePeriod: '2023-12-19', y: 5 },
        { timePeriod: '2023-12-20', y: 5 },
        { timePeriod: '2023-12-21', y: 7 },
        { timePeriod: '2023-12-22', y: 3 },
        { timePeriod: '2023-12-23', y: 8 },
        { timePeriod: '2023-12-24', y: 9 },
        { timePeriod: '2023-12-25', y: 4 },
        { timePeriod: '2023-12-26', y: 2 },
    ]);

    const config = {
        data,
        xField: 'timePeriod',
        yField: 'y',
        xAxis: {
            label:null,
            range: [0, 1],
        },
        yAxis:{
            label: null,
            grid: null,
        },
        line: {
            style: {
                stroke: 'purple', 
            },
        },
    };

    return <Area {...config} height={35} width={50} />;
};

export default DemoArea

3、柱状图部分

import { Column } from '@ant-design/plots';
const DemoColumn = () => {
    const data = [
        {
            type: '1',
            sales: 7,
        },
        {
            type: '2',
            sales: 5,
        },
        {
            type: '3',
            sales: 4,
        },
        {
            type: '4',
            sales: 2,
        },
        {
            type: '5',
            sales: 4,
        },
        {
            type: '6',
            sales: 7,
        },
        {
            type: '7',
            sales: 5,
        },
        {
            type: '8',
            sales: 6,
        },
        {
            type: '9',
            sales: 5,
        },
        {
            type: '10',
            sales: 9,
        },
        {
            type: '11',
            sales: 6,
        },
        {
            type: '12',
            sales: 3,
        },
        {
            type: '13',
            sales: 1,
        },
        {
            type: '14',
            sales: 5,
        },
        {
            type: '15',
            sales: 3,
        },
        {
            type: '16',
            sales: 6,
        },
        {
            type: '17',
            sales: 5,
        },

    ];
    const config = {
        data,
        xField: 'type',
        yField: 'sales',
        label: {
            // 可手动配置 label 数据标签位置
            position: 'middle',
            // 'top', 'bottom', 'middle',
            // 配置样式
            content: null,
            style: {
                fill: '#FFFFFF',
                opacity: 0.6,
            },
        },
        xAxis: {
            label:null
        },
        yAxis:{
            label:null,
            grid: null,
        },
        meta: {
            type: {
                alias: '类别',
            },
            sales: {
                alias: 'y',
            },
        },
    };
    return <Column {...config} height={35} width={50} />;
};

export default DemoColumn;

4、进度条部分

import React from 'react';
import { Progress } from 'antd';
const twoColors = {
    '0%': '#108ee9',
    '100%': '#87d068',
};
const DemoProgress = () => (
    <div
        style={{
            width: 170,
        }}

    >
        <Progress percent={78} size="small" status="active" strokeColor={twoColors} />
    </div>
);
export default DemoProgress;

今天画时间较多的部分就是，进度条是使用antd组件做的，我用AntV里的组件写了半天，，， 一直达不到效果，最后才发现是组件调用错误

复现的部分截图如下：

明日任务：继续复现这个界面