Slash后台管理系统源码阅读笔记后面面板中的折线图统计卡片是怎么实现的？

之前的笔记发表在博客和公众号以后，得到了一部分同学的喜爱的认可，所以今天继续。

目前这个管理系统的代码已经处理了一小部分：
在这里插入图片描述

接下来，我们看看第二栏那三个折线图统计卡片是怎么实现的。

这三个卡片还是使用的 antd 一行三列的布局方式，具体代码如下：

{/*折线图统计卡片*/}
<Row gutter={[16, 16]} className="mt-4" justify="center">
  <Col span={24} md={8}>
    <TotalCard
      title="Total Active Users"
      increase
      count="18,765"
      percent="2.6%"
      chartData={[22, 8, 35, 50, 82, 84, 77, 12, 87, 43]}
    />
  </Col>

  <Col span={24} md={8}>
    <TotalCard
      title="Total Installed"
      increase
      count="4,876"
      percent="0.2%"
      chartData={[45, 52, 38, 24, 33, 26, 21, 20, 6]}
    />
  </Col>

  <Col span={24} md={8}>
    <TotalCard
      title="Total Downloads"
      increase={false}
      count="678"
      percent="0.1%"
      chartData={[35, 41, 62, 42, 13, 18, 29, 37, 36]}
    />
  </Col>
</Row>

首先，我们将标题改一下：

<Row gutter={[16, 16]} className="mt-4" justify="center">
  <Col span={24} md={8}>
    <TotalCard
      title="活跃用户"
      increase
      count="18,765"
      percent="2.6%"
      chartData={[22, 8, 35, 50, 82, 84, 77, 12, 87, 43]}
    />
  </Col>

  <Col span={24} md={8}>
    <TotalCard
      title="安装数量"
      increase
      count="4,876"
      percent="0.2%"
      chartData={[45, 52, 38, 24, 33, 26, 21, 20, 6]}
    />
  </Col>

  <Col span={24} md={8}>
    <TotalCard
      title="下载数量"
      increase={false}
      count="678"
      percent="0.1%"
      chartData={[35, 41, 62, 42, 13, 18, 29, 37, 36]}
    />
  </Col>
</Row>

此时，页面渲染效果如下：
在这里插入图片描述

接着，我们看看统计卡片是怎么实现的：

import Card from '@/components/card';
import Chart from '@/components/chart/chart';
import useChart from '@/components/chart/useChart';
import { SvgIcon } from '@/components/icon';

// 属性
type Props = {
  title: string; // 标题
  increase: boolean; //  是否增长
  percent: string; // 百分比
  count: string; // 数量
  chartData: number[]; // 图表数据
};

// 统计卡片组件
export default function TotalCard({ title, increase, count, percent, chartData }: Props) {
  return (
    <Card>
      <div className="flex-grow">
        {/*标题*/}
        <h6 className="text-sm font-medium">{title}</h6>
        {/*根据是否增长，动态显示icon图标*/}
        <div className="mb-2 mt-4 flex flex-row">
          {increase ? (
            <SvgIcon icon="ic_rise" size={24} color="rgb(34, 197, 94)" />
          ) : (
            <SvgIcon icon="ic_decline" size={24} color="rgb(255, 86, 48)" />
          )}
          <div className="ml-2">
            <span>{increase ? '+' : '-'}</span>
            <span>{percent}</span>
          </div>
        </div>
        {/*数量*/}
        <h3 className="text-2xl font-bold">{count}</h3>
      </div>
      {/*折线图*/}
      <ChartLine data={chartData} />
    </Card>
  );
}

// 折线图组件
function ChartLine({ data }: { data: number[] }) {
  const series = [
    {
      name: '',
      data,
    },
  ];
  // 折线图选项
  const chartOptions = useChart({
    tooltip: {
      x: {
        show: false,
      },
    },
    xaxis: {
      labels: {
        show: false,
        showDuplicates: false,
      },
      tooltip: {
        enabled: false,
      },
      crosshairs: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        show: false,
      },
      tooltip: {
        enabled: false,
      },
      crosshairs: {
        show: false,
      },
    },
    grid: {
      show: false,
    },
  });

  // 渲染图表
  return <Chart type="line" series={series} options={chartOptions} width={120} />;
}

在 ChartLine这个组件中，我们最终使用了Chart这个组件进行图表渲染，所以我们进一步看看Chart这个组件是怎么实现的。

import { memo } from 'react';
import ApexChart from 'react-apexcharts';

import { useSettings } from '@/store/settingStore';
import { useThemeToken } from '@/theme/hooks';

import { StyledApexChart } from './styles';

import type { Props as ApexChartProps } from 'react-apexcharts';

// 通用图表组件
function Chart(props: ApexChartProps) {
  const { themeMode } = useSettings();
  const theme = useThemeToken();
  return (
    // 使用CSS样式组件
    <StyledApexChart $thememode={themeMode} $theme={theme}>
      {/*最终使用ApexChart进行渲染*/}
      <ApexChart {...props} />
    </StyledApexChart>
  );
}

export default memo(Chart);