echarts系列——时刻表网格图

网上翻了好久，发现基本没人写关于事件走向的网格图（x轴为时间，y轴为事件或地点），于是自己实现了一个，下面给出一个简版

不说废话直接上代码，getAllDayTime传入0≤x≤y≤23的数，x轴可有以分钟为刻度

function getAllDayTime(x, y) {var time = [];for(var i = x; i < y; i++) {var hour = i;if(hour < 10) hour = '0' + i;for(var j = 0; j < 60; j++) {var min = j;if(min < 10) min = '0' + j;time.push(hour + ':' + min)}}return time;
}
option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},formatter: function(value) {return '驾驶员：' + value[0].data[2] + "<br/>乘务员：" + value[0].data[3]}},grid: {left: 130},xAxis: {data: getAllDayTime(6, 24)},yAxis: {data: ['0站', '1站']},series: [{type: 'line',data: [['08:00', '0站', '驾驶1', '乘务1'],['09:00', '1站', '驾驶1', '乘务1'],]}, {type: 'line',data: [['09:00', '0站', '驾驶2', '乘务2'],['10:00', '1站', '驾驶2', '乘务2']]}]
}

具体效果：

echarts系列——时刻表网格图相关推荐

1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
04 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
html河流效果,ECharts系列：主题河流图
在ECharts系列中,使用series[i]-themeRiver设置主题河流图,主题河流图是一种特殊的流图,它主要用来表示事件或主题等在一段时间内的变化. 示例: 主题河流图可视编码主题河流中不 ...
ECharts系列 - 柱状图（条形图）实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可. 第一篇为Echarts入门文档,如果没有Echarts基础,理解 ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
Echarts 设置面积区域图（areaStyle核心）
第011个点击查看专栏目录 Echarts折线区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用.区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据.通过 areaStyle 设 ...
Matlab论文插图绘制模板第67期—三角网格图(Trimesh)
在之前的文章中,分享了Matlab网格曲面图的绘制模板: 以及一些特殊形式的网格曲面图: 这一次,再来分享一种特殊的网格曲面图:三角网格图. 先来看一下成品效果: 特别提示:Matlab论文插图绘制模 ...

echarts系列——时刻表网格图

echarts系列——时刻表网格图相关推荐

最新文章

热门文章