前言
# 前言
账单的操作部分在之前的章节已经结束了，本章节我们学习如何将账单列表，以可视化数据的新形势展示，本章节我们会通过 Echart 插件，对数据进行可视化展示。
页面布局和分析如下所示：
# 知识点
- Echart 引入和使用。
- 进度条组件
Progress的使用。
# 正文
# 头部筛选和数据实现
当你看到顶部的时间筛选项的时候，你会再一次体会到当初把时间筛选功能封装成公用组件的好处，于是我们打开 Data/index.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 <div className={s.data}>
<div className={s.total}>
<div className={s.time}>
<span>2021-06</span>
<Icon className={s.date} type="date" />
</div>
<div className={s.title}>共支出</div>
<div className={s.expense}>¥1000</div>
<div className={s.income}>共收入¥200</div>
</div>
</div>
}
export default Data
头部的一些引入是为后面的代码所用，在这里事先引入，避免后面重复出现。
上述代码为头部统计的页面布局，同样采用的 flex 布局，样式部分如下：
文末已为同学们提供下本章节 demo 代码，样式部分不再详细说明。
样式部分有一个小技巧需要注意，日期后面的小竖线，如下所示：
在业务中，类似这样的需求非常多，这里我们可以使用伪类 ::before 或 ::after 去实现，减少在页面中再添加一些多余的标签。上述代码实现的逻辑是在日期的 span 上加上 ::after，如下所示：
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 组件，代码如下：
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 <div className={s.data}>
<div className={s.total}>
<div className={s.time} onClick={monthShow}>
<span>{currentMonth}</span>
<Icon className={s.date} type="date" />
</div>
<div className={s.title}>共支出</div>
<div className={s.expense}>¥1000</div>
<div className={s.income}>共收入¥200</div>
</div>
<PopupDate ref={monthRef} mode="month" onSelect={selectMonth} />
</div>
}
给日期按钮添加 monthShow 点击事件，调出 PopupDate 弹窗。并且，通过 selectMonth 方法，设置好选择的月份，展示于页面之上。效果如下所示：
# 账单单项排名制作
我们将账单排名部分的结构搭建出来，通过请求数据接口，将数据展示在页面上，代码如下：
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 <div className={s.data}>
...
<div className={s.structure}>
<div className={s.head}>
<span className={s.title}>收支构成</span>
<div className={s.tab}>
<span onClick={() => changeTotalType('expense')} className={cx({ [s.expense]: true, [s.active]: totalType == 'expense' })}>支出</span>
<span onClick={() => changeTotalType('income')} className={cx({ [s.income]: true, [s.active]: totalType == 'income' })}>收入</span>
</div>
</div>
<div className={s.content}>
{
(totalType == 'expense' ? expenseData : incomeData).map(item => <div key={item.type_id} className={s.item}>
<div className={s.left}>
<div className={s.type}>
<span className={cx({ [s.expense]: totalType == 'expense', [s.income]: totalType == 'income' })}>
<CustomIcon
type={item.type_id ? typeMap[item.type_id].icon : 1}
/>
</span>
<span className={s.name}>{ item.type_name }</span>
</div>
<div className={s.progress}>¥{ Number(item.number).toFixed(2) || 0 }</div>
</div>
<div className={s.right}>
<div className={s.percent}>
<Progress
shape="line"
percent={Number((item.number / Number(totalType == 'expense' ? totalExpense : totalIncome)) * 100).toFixed(2)}
theme='primary'
/>
</div>
</div>
</div>)
}
</div>
</div>
...
</div>
}
上述是账单排名部分的代码部分，通过 getData 方法获取账单数据，接口字段分析：
首先我们需要传递日期参数 date，才能正常获取该月份的数据。
- number: 账单金额。
- pay_type：账单类型，1 为支出，2为收入。
- type_id：账单种类 id。
- type_name：账单种类名称，如购物、交通、医疗等。
并将数据进行二次处理，将「收入」和「支出」分成两个数组保存。
通过 changeTotalType 方法，切换展示「收入」或「支出」。
通过对 Progress 组件的样式二次修改，样式代码如下：
文末已为同学们提供下本章节 demo 代码，样式部分不再详细说明。
将组件展示效果改成如下所示：
# 饼图制作
接下来我们尝试引入 Echart，我们不通过 npm 引入它，我们尝试引入它的静态资源，找到根目录下的 index.html，添加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" sizes="32x32" href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/favicons/v2/favicon-32x32.png~tplv-t2oaga2asx-image.image">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>掘掘手札</title>
</head>
<body>
<div id="root"></div>
<script src="//s.yezgea02.com/1609305532675/echarts.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
这种引入方式，不会将 echart 打包到最终的入口脚本里。有同学会说可以按需引入，但是就算是按需引入，脚本也会变得很大，本身 echart 这类可视化工具库就非常大，因为内部使用了大量绘制图形的代码。
完成上述操作之后，我们尝试在 /Data/index.jsx 添加如下代码：
let proportionChart = null; // 用于存放 echart 初始化返回的实例
const Data = () => {
...
const [pieType, setPieType] = useState('expense'); // 饼图的「收入」和「支出」控制
useEffect(() => {
getData();
return () => {
// 每次组件卸载的时候，需要释放图表实例。clear 只是将其清空不会释放。
proportionChart.dispose();
};
}, [currentMonth]);
// 绘制饼图方法
const setPieChart = (data) => {
if (window.echarts) {
// 初始化饼图，返回实例。
proportionChart = echarts.init(document.getElementById('proportion'));
proportionChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
// 图例
legend: {
data: data.map(item => item.type_name)
},
series: [
{
name: '支出',
type: 'pie',
radius: '55%',
data: data.map(item => {
return {
value: item.number,
name: item.type_name
}
}),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
};
};
// 获取数据详情
const getData = async () => {
// ...
// 绘制饼图
setPieChart(pieType == 'expense' ? expense_data : income_data);
};
// 切换饼图收支类型
const changePieType = (type) => {
setPieType(type);
// 重绘饼图
setPieChart(type == 'expense' ? expenseData : incomeData);
}
return <div className={s.data}>
...
<div className={s.structure}>
<div className={s.proportion}>
<div className={s.head}>
<span className={s.title}>收支构成</span>
<div className={s.tab}>
<span onClick={() => changePieType('expense')} className={cx({ [s.expense]: true, [s.active]: pieType == 'expense' })}>支出</span>
<span onClick={() => changePieType('income')} className={cx({ [s.income]: true, [s.active]: pieType == 'income' })}>收入</span>
</div>
</div>
{/* 这是用于放置饼图的 DOM 节点 */}
<div id="proportion"></div>
</div>
</div>
</div>
}
切换饼图「收入」和「支出」这里，我使用了一个小技巧，每次调用 setPieChart 的时候，会将数据重新传入，此时的数据是经过 changePieType 接收的参数进行筛选的，如果形参 type 的值为 expense，那么给 setPieChart 传的参数为 expenseData，反之则为 incomeData。
注意，在页面销毁前，需要将实例清除。在 useEffect 内 return 一个函数，该函数就是在组件销毁时执行，在函数内部执行 proportionChart.dispose(); 对实例进行销毁操作。
最后，我们将头部的数据补上，如下所示：
<div className={s.expense}>¥{ totalExpense }</div>
<div className={s.income}>共收入¥{ totalIncome }</div>
浏览器展示如下：
# 总结
可视化的形式还有很多，相关的可视化库有 three.js、d3.js、highchart.js等等，这些内容都值得你去深入，但是在此之前，希望同学们能明确自己希望深入那一方面的知识，进行深度学习。比如张鑫旭大神，对 CSS 的研究，入骨三分，我相信业务无人出其右。所以找准方向，往前冲。
![[嘿哈]](https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)