Node + React 实战：从 0 到 1 实现记账本（十五）

---

theme: channing-cyan

前言

账单的操作部分在之前的章节已经结束了，本章节学习如何将账单列表，以可视化数据的新形势展示，本章节会通过 Echart 插件，对数据进行可视化展示。

页面布局和分析如下所示：

知识点

• Echart 引入和使用。
• 进度条组件 Progress 的使用。

正文

一.头部筛选和数据实现

当你看到顶部的时间筛选项的时候，你会再一次体会到当初把时间筛选功能封装成公用组件的好处，于是打开 Data/index.jsx，添加如下代码：

```jsx import React, { useEffect, useRef, useState } from 'react'; import { Icon, Progress } from 'zarm'; import cx from 'classnames'; import dayjs from 'dayjs'; import { get, typeMap } from '@/utils' import CustomIcon from '@/components/CustomIcon' import PopupDate from '@/components/PopupDate' import s from './style.module.less';

const Data = () => { return

2021-06

export default Data ```

头部的一些引入是为后面的代码所用，在这里事先引入，避免后面重复出现。 上述代码为头部统计的页面布局，同样采用的 flex 布局，样式部分如下：

样式部分不再详细说明。

样式部分有一个小技巧需要注意，日期后面的小竖线，如下所示：

在业务中，类似这样的需求非常多，这里可以使用伪类 ::before 或 ::after 去实现，减少在页面中再添加一些多余的标签。上述代码实现的逻辑是在日期的 span 上加上 ::after，如下所示：

css span:nth-of-type(1)::after { content: ''; position: absolute; top: 9px; bottom: 8px; right: 28px; width: 1px; background-color: rgba(0, 0, 0, .5); } 给一个空的 content，再给上 1px 的宽度，颜色和上下距离可以根据需求调整。

再次强调，flex 布局的重要性，一定要把它吃透，至少在布局的时候，你可以灵活的运用横竖布局。

点击如期按钮，弹出底部弹窗，这里使用到了之前写好的 PopupDate 组件，代码如下： ```jsx const Data = () => { const monthRef = useRef(); const [currentMonth, setCurrentMonth] = useState(dayjs().format('YYYY-MM'));

// 月份弹窗开关 const monthShow = () => { monthRef.current && monthRef.current.show(); };

const selectMonth = (item) => { setCurrentMonth(item); };

return

{currentMonth}

给日期按钮添加 monthShow 点击事件，调出 PopupDate 弹窗。并且，通过 selectMonth 方法，设置好选择的月份，展示于页面之上。效果如下所示：

给日期按钮添加 monthShow 点击事件，调出 PopupDate 弹窗。并且，通过 selectMonth 方法，设置好选择的月份，展示于页面之上。效果如下所示：

二.账单单项排名制作

将账单排名部分的结构搭建出来，通过请求数据接口，将数据展示在页面上，代码如下： ```jsx const Data = () => { ... const [totalType, setTotalType] = useState('expense'); // 收入或支出类型 const [totalExpense, setTotalExpense] = useState(0); // 总支出 const [totalIncome, setTotalIncome] = useState(0); // 总收入 const [expenseData, setExpenseData] = useState([]); // 支出数据 const [incomeData, setIncomeData] = useState([]); // 收入数据

useEffect(() => { getData() }, [currentMonth]);

// 获取数据详情 const getData = async () => { const { data } = await get(/api/bill/data?date=${currentMonth});

// 总收支
setTotalExpense(data.total_expense);
setTotalIncome(data.total_income);

// 过滤支出和收入
const expense_data = data.total_data.filter(item => item.pay_type == 1).sort((a, b) => b.number - a.number); // 过滤出账单类型为支出的项
const income_data = data.total_data.filter(item => item.pay_type == 2).sort((a, b) => b.number - a.number); // 过滤出账单类型为收入的项
setExpenseData(expense_data);
setIncomeData(income_data);

};

return

id} className={s.item}>

id ? typeMap[item.type id].icon : 1} /> name }

) }

... } ```