大屏监控系统实战（14）-24小时得票数量统计曲线制作

一、概述

这一章节我们来制作《24小时得票数量统计曲线》，这个跟10分钟投票的增量类似，不过他显示的是每个博主的总得票数，时间范围我设置为24小时，取每个小时博主的总得票数，通过这个监控，可以看到博主中长期的得票走势。10分钟增量统计的是瞬时峰值，而24小时得票数则反映出一种趋势，他的应用场景很多，比如统计店铺一个月每天的营业额，一年每个月的营业额，类似于这样的场景，大家都可以选择这种折线图来实现。

投票网官方数据是统计的每个博主72小时 的得票数，因为数据量太大，而我们的大屏显示区域比较小，所以我们只显示近24小时内每小时的得票数，最终效果如下：

二、实现思路

这个跟十分钟增量图的做法非常类似，因为我们已经爬取了所有博主每五分钟的投票数，所以我们只要将博主近24小时每小时的得票数查询出来发送到页面渲染就好了。但现在的便利条件是官方投票渠道已经把这个数据给我们统计好了，所以我们只需要从爬取官方投票渠道的数据处理后渲染到前端即可，这大大简化sql的编写。

三、24小时得票数量统计曲线页面的demo数据格式分析

我们最终会将TopRightCmp.vue组件修改成10分钟投票增量曲线组件，这个demo会显示成如下模样：