1、引入js文件：
<script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script>
<script type="text/javascript" src="echarts存放/echarts.min.js"></script>
2、存放甘特图的容器
<div id="container"></div><!--其他样式自行加上即可-->
3、实现甘特图的js
var myCharts = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '项目实施进度表',
left: 10
},
legend: {
y: 'bottom',
data: ['计划时间', '实际时间'] //修改的地方1
},
grid: {
containLabel: true,
left: 20
},
xAxis: {
type: 'time'
},
yAxis: {
data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>"
var date0 = params[0].data;
var date1 = params[1].data;
var date2 = params[2].data;
var date3 = params[3].data;
date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
console.log(params[0]);
return res;
}
},
series: [
{
name: '计划开始时间',
type: 'bar',
stack: 'test1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2015/09/2"),
new Date("2015/09/15"),
new Date("2015/09/15"),
new Date("2015/10/03"),
new Date("2015/10/04"),
new Date("2015/10/05"),
new Date("2015/10/06")
]
},
{
name: '计划时间',
type: 'bar',
stack: 'test1',
//修改地方2
itemStyle: {
normal: {
color: '#F98563'
}
},
data: [
new Date("2015/09/12"),
new Date("2015/09/20"),
new Date("2015/09/25"),
new Date("2015/10/05"),
new Date("2015/10/07"),
new Date("2015/10/09"),
new Date("2015/10/12")
]
},
{
name: '实际开始时间',
type: 'bar',
stack: 'test2',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2015/09/2"),
new Date("2015/09/15"),
new Date("2015/09/15"),
new Date("2015/10/03"),
new Date("2015/10/04"),
new Date("2015/10/05"),
new Date("2015/10/06")
]
},
{
name: '实际时间',
type: 'bar',
stack: 'test2',
//修改地方3
itemStyle: {
normal: {
color: '#A2E068'
}
},
data: [
new Date("2015/09/6"),
new Date("2015/09/20"),
new Date("2015/09/27"),
new Date("2015/10/11"),
new Date("2015/10/16"),
new Date("2015/10/18"),
new Date("2015/10/17")
]
}
]
};
myCharts.setOption(option);
注：包含图表的div#container一定要设置高宽，否则页面上没有图表。
参考文档：http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl
let data = [{
"name": "联调",
"start": "2020-02-17",
"end": "2020-02-23"
},
{
"name": "测试",
"start": "2020-02-24",
"end": "2020-03-10"
},
{
"name": "灰度",
"start": "2020-02-29",
"end": "2020-03-11"
},
{
"name": "发布",
"start": "2020-03-10",
"end": "2020-03-12"
}
];
let result = [];
for (let i = data.length - 1; i >= 0; i--) {
result.push(data[i]);
}
data = result;
option = {
tooltip: {
trigger: 'axis'
// formatter: '{b}: {c}<br/>{b1}: {c1}'
},
legend: {
data: ['投入']
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'category',
data: data.map(item => item.name)
},
series: [{
name: '投入隐藏线',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(item => item.start)
}, {
name: '投入',
type: 'bar',
stack: '总量',
barWidth: 10,
itemStyle: {
emphasis: {
barBorderRadius: 50
},
normal: {
barBorderRadius: [10, 10, 10, 10],
color: '#C1232B'
}
},
label: {
normal: {
show: false,
position: 'right'
}
},
data: data.map(item => item.end)
}]
}