Toggle navigation
竖版甘特图
By
慎***茜
2020-12-09 04:03:06
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var colors = ["#668ed6", "#23c2db", "#9cdc82", "#3a76af", "#d15b7f"]; //颜色 var xData = ["2020-12-01","2020-12-02","2020-12-03","2020-12-04","2020-12-05","2020-12-06","2020-12-07","2020-12-08"] var seriesData = [ { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-01", "value":[0,"2020-12-01 07:45","2020-12-02 06:11","2020-12-01 07:45","2020-12-02 06:11","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-02", "value":[1,"2020-12-01 06:11","2020-12-01 06:41","2020-12-02 06:11","2020-12-02 06:41","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-02", "value":[1,"2020-12-01 06:41","2020-12-01 07:45","2020-12-02 06:41","2020-12-02 07:45","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-02", "value":[1,"2020-12-01 07:45","2020-12-01 11:32","2020-12-02 07:45","2020-12-02 11:32","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-02", "value":[1,"2020-12-01 11:32","2020-12-01 11:57","2020-12-02 11:32","2020-12-02 11:57","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-02", "value":[1,"2020-12-01 11:57","2020-12-02 01:30","2020-12-02 11:57","2020-12-03 01:30","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-03", "value":[2,"2020-12-01 01:30","2020-12-01 01:53","2020-12-03 01:30","2020-12-03 01:53","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-03", "value":[2,"2020-12-01 01:53","2020-12-01 07:44","2020-12-03 01:53","2020-12-03 07:44","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-03", "value":[2,"2020-12-01 07:45","2020-12-01 08:25","2020-12-03 07:45","2020-12-03 08:25","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-03", "value":[2,"2020-12-01 08:25","2020-12-02 03:50","2020-12-03 08:25","2020-12-04 03:50","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 03:50","2020-12-01 04:20","2020-12-04 03:50","2020-12-04 04:20","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 04:20","2020-12-01 07:45","2020-12-04 04:20","2020-12-04 07:45","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 07:45","2020-12-01 12:29","2020-12-04 07:45","2020-12-04 12:29","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 12:29","2020-12-01 12:54","2020-12-04 12:29","2020-12-04 12:54","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 12:54","2020-12-01 20:21","2020-12-04 12:54","2020-12-04 20:21","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 20:21","2020-12-01 20:44","2020-12-04 20:21","2020-12-04 20:44","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-04", "value":[3,"2020-12-01 20:44","2020-12-02 04:44","2020-12-04 20:44","2020-12-05 04:44","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-05", "value":[4,"2020-12-01 04:44","2020-12-01 05:19","2020-12-05 04:44","2020-12-05 05:19","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-05", "value":[4,"2020-12-01 05:19","2020-12-01 07:44","2020-12-05 05:19","2020-12-05 07:44","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-05", "value":[4,"2020-12-01 07:45","2020-12-02 01:18","2020-12-05 07:45","2020-12-06 01:18","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 01:18","2020-12-01 01:38","2020-12-06 01:18","2020-12-06 01:38","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 01:38","2020-12-01 07:44","2020-12-06 01:38","2020-12-06 07:44","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 07:45","2020-12-01 12:10","2020-12-06 07:45","2020-12-06 12:10","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 12:10","2020-12-01 12:30","2020-12-06 12:10","2020-12-06 12:30","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 12:30","2020-12-01 15:12","2020-12-06 12:30","2020-12-06 15:12","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 15:12","2020-12-01 15:37","2020-12-06 15:12","2020-12-06 15:37","任务0"] }, { "itemStyle":{ "normal":{ "color":"#23c2db" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-06", "value":[5,"2020-12-01 15:37","2020-12-01 19:44","2020-12-06 15:37","2020-12-06 19:44","任务1"] }, { "itemStyle":{ "normal":{ "color":"#9cdc82" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-07", "value":[6,"2020-12-01 07:45","2020-12-01 08:23","2020-12-07 07:45","2020-12-07 08:23","任务2"] }, { "itemStyle":{ "normal":{ "color":"#3a76af" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-07", "value":[6,"2020-12-01 08:23","2020-12-01 23:29","2020-12-07 08:23","2020-12-07 23:29","任务3"] }, { "itemStyle":{ "normal":{ "color":"#d15b7f" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-07", "value":[6,"2020-12-01 23:29","2020-12-01 23:54","2020-12-07 23:29","2020-12-07 23:54","任务4"] }, { "itemStyle":{ "normal":{ "color":"#668ed6" } }, "label":{ "normal":{ "show":true, "position":"inside", "formatter": function(params){ let info = []; params.value[5] && info.push(params.value[5]); params.value[6] && info.push(params.value[6]); params.value[7] && info.push(params.value[7]); return info.join('\n') }, "textStyle":{ "fontSize":10 } } }, "name":"2020-12-07", "value":[6,"2020-12-01 23:54","2020-12-02 07:44","2020-12-07 23:54","2020-12-08 07:44","任务0" ] } ]; function getzf(num) { if (parseInt(num) < 10) { num = '0' + num; } return num; } // echart配置 var option = { color: colors, tooltip: {//提示框 formatter: function (params) { return '<div>任务名称：'+params.value[5] + '<div>开始时间：'+params.value[3].substr(5,16)+ '<div>结束时间：'+params.value[4].substr(5,16);; },//数据的值 textStyle: { fontSize: 10 } }, legend: {//图例 data: xData, bottom: '1%', selectedMode: false, // 图例设为不可点击 textStyle: { color: '#000' } }, toolbox:{ feature: { saveAsImage: {} } }, grid: {//绘图网格 left: '3%', right: '3%', top: '20px', bottom: '10%', containLabel: true }, xAxis: { data: xData }, yAxis: { type: 'time', interval: 3600 * 1000, //以一个小时递增 min: '2020-12-01 00:00:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增 max: '2020-12-02 08:00:00', axisLabel: { formatter: function (value) { var date = new Date(value); return getzf(date.getHours()) + ':00'; }, } }, series: [ { type: 'custom', renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的 var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var start = api.coord([categoryIndex, api.value(1)]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 var end = api.coord([categoryIndex, api.value(2)]); var width = 70; return { type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。 shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。 x: start[0] - width / 2, y: end[1], width: width, height: start[1] - end[1] }, { // 当前坐标系的包围盒。 x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }), style: api.style() }; }, encode: { x: 0, // data 中『维度1』和『维度2』对应到 X 轴 y: [1, 2]// data 中『维度0』对应到 Y 轴 }, data: seriesData } ] };
