记账页面
记账app很重要的一个功能就是收支的可视化页面，让用户通过echar图表直观了解自己的收支状况是一个记账类app应该做到的。
首先在views下创建统计页面StatisticsPage组件，设计基本同之前的ItemList组件
支持四个tab，每个tab下面会展示对应时间的收支图表。
这时我们会发现与ItemList组件有相当大部分的重复操作，因此决定进行对TimeTabsLayout组件的封装。
需要注意的是每个Tab里面的内容需要从props里面传来对应的component即可。
比如之前的ItemList组件 引入了TimeTabsLayout之后 则变成了：
预览效果：
Charts组件
现在要想实现点击本月则显示本月的内容，点击下个月显示下个月的内容，这时回到Charts组件。内容可以使用之前封装好的FormItem组件
回到Form组件增加select的type 以及options的props
options是个数组，接受两个属性，value和text都是字符串。
在计算属性中加入select的case，返回一个select下拉选择标签，里面会有一个option的内容。我们直接对props.options进行遍历,对于每一个options，都返回option标签，并且value等于option的value，内容就是option的text。添加一个onChange事件监听，当元素的值变化的时候emit出去实现更新。
使用echarts
命令行执行npm install echarts --save
引入模版代码。我们先创建一个divref，代替模版中的main，将初始化echarts实例放在onMounted里面。
将ref与div建立关联
改一些样式即可，记得要在echart的容器里加上高度 否则不会显示
使用div制作条形图
先初始化这个条形图所需要的数据 我们叫作data3
它里面有tag和amount 对应了什么事情花了多少钱，tag是有id的
这里需要考虑的是后端传来的数据能不能是这样的结构
问题在于：data3缺少百分比的数据不能直接使用
所以我们通过computed属性来构造一个 betterData3
返回 对于data3每一项进行map遍历，先抄写原本的item然后添加percent关键字，它等于amount除以total*100+%
const total = data3.reduce((sum,item)=>sum+item.amount,0)
存放这个div图表的div则要对这个计算属性进行遍历然后返回一些标签
