Echarts制作时间柱形离散分布图

话不多说， 先上效果：

时间离散分布图

制作步骤：

1  找到echarts官方自定义原型图：

官方自定义x-range原型图

2  再观察源代码， 发现

    这块代码决定了数据的颜色显示， 从而出现x-range展示多个数据柱形的效果， 因为我们只需要显示一个数据， 所以就定义一种颜色即可， 因为需要按日期进行tooltip提示， 所以就按照实际单月日期填充数据， 颜色不变

    ok, 在不改变官方其他代码的情况下， 至此就课展现只显示一种数据效果的x-range图来了， 下面进行数据填充

3  时间数据切分

    我们使用的是Mysql，时间存储格式为

我们需要提取其中的InsertTime和LastTime字段， 并按天进行时间切分， 再填入图表中；我的思路是：先将时间按 要查询的月份 一次性提取出来， 再把所有时间限定在该月份内。我是按照LastTime字段进行查询， 考虑到InsertTime字段有可能也在该月份内， 所以又再按照InsertTime字段查询了一次， 并只取最早的一条数据， 接着进行判断该条数据是否有部分在该月内， 若有则追加到之前查询的数据组中看， 并将其LastTime设置为 该月末，但因为不好确定该月末具体时间， 索性就定为次月初的00:00:00； 次月用的是InsertTime字段的月初00:00:00的时间戳 + 3456000 （即追加40天的秒数， 以此确保过渡到下月份的时间）， 再提取转换后的时间戳的年月即可；同理， 处理上月末跨月时间的数据； 以下为代码：

    这样， 就将取得的所有时间数据限定在了 查询月份内

4  时间切分

    首先要再处理首条时间不在 该月1号的情况：

    接着就可以进行时间按日切分了：因为需要返回一个按天存储的数组， 所以就要设定一个时间累加变量， 比如我设定的dayTotal，用以判断时间是否已经超过了一日， 即86400秒；超过一日的情况有两种： 一种是所查询的时间范围即InsertTime - LastTime中的时间超过了一日， 另一种是这之外的时间超过了一日， 比如我们就定义前者为离线时间， 后者为在线时间；接着用dayTotal不断累加在线和离线时间， 并分别做出判断，若超过一日， 则清零dayTotal， 并使数组下标下移， 以此表示次日；下面为代码部分：

最后注意重新排序一下数组的下标顺序， 因为以免数组调用数据下标索引混乱。

5  写入x-range图中：

    在官方源代码中， 我们可以看到数据是由echarts.util.each()函数来完成设定的， 同样我只需要照瓢画葫， 用我们的数据来增加替换这个函数中的数据即可！注意如果要不刷新页面更新图标展示， 就需要在每次调用该函数时， 设定date = []， 因为我们采用的是push方法往data中添加数据，如果不清零一下， 就会造成x-range图重叠

至此， 完成单个数据的x-range图展示。

谢谢阅读^-^