echarts按照时间显示柱状图_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图展示。

谢谢阅读^-^

echarts按照时间显示柱状图_Echarts制作时间柱形离散分布图相关推荐

echarts按照时间显示柱状图_ECharts柱状图的标注如何实现
ECharts 中使用 markPoint 可以控制柱状图的标注. series[i]-bar.markPoint 设置 ECharts 柱状图标注,这是一个 Object. series[i]-ba ...
echarts按照时间显示柱状图_echarts 不连续的柱状图在线时间分布离散图
刚开始看到ui的设计图时,我就一直在想怎么可以用柱状图堆叠的形式来呈现这种效果.直到我看到了这个官方实例自定义系列,跟我要实现的效果非常相似了.这是echarts的自定义系列图表,type: 'cus ...
echarts的legend显示不全_Echarts【1、数据过多导致显示不全分页，2、数据展示探讨分析】...
var len=; var dataZoom_end=null; //为空默认100%所以默认显示5个是能显示下的 if(len >5 ){ var dataZoom_end = (5/len) ...
Echarts中柱状图X轴显示时间显示不开倾斜显示的属性
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
echarts 地图和柱状图结合（在地图上显示柱状图）
如图,需求要做一个在地图上显示柱状图的echarts图,但是百度了半天,发现很少有人发这种例子.这个代码也是借鉴的别人的文章,但需求肯定不完全一致,那我会根据我的需求把代码和注意事项发出来并解释.(如 ...
linux下bash脚本常用的十个技巧：显示执行脚本花费的时间，在脚本退出时杀死后台运行的程序，在脚本退出时跳出循环，读取命令行参数来决定循环次数
文章目录 1.显示执行脚本花费的时间 2.在脚本退出时杀死后台运行的程序 3.在脚本退出时跳出循环 4.读取命令行参数来决定循环次数 1.显示执行脚本花费的时间网址:bash - How to ge ...
C#表格table时间显示年月日时分秒格式设置
C#表格table时间显示年月日时分秒格式设置作者:张国军_Suger 开发工具与关键技术:Visual Studio 2015.C#..NET 在做C#项目是遇到的前端表格的时间处理问题,一般都是 ...
echarts如何显示多个柱形图_使用echarts画多维柱状图
前言在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...

echarts按照时间显示柱状图_Echarts制作时间柱形离散分布图

echarts按照时间显示柱状图_Echarts制作时间柱形离散分布图相关推荐

最新文章

热门文章