DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>甘特图title>
<script type="text/javascript" src="echarts.min(1).js">script>
head>
<body>
<div id="content" style="width: 900px;height: 300px">div>
body>
<script>
var stageProgress = {
fangAnTimeBucket: ['2017-11-23', '2017-11-28'],
gangYaoTimeBucket: ['2017-11-25', '2017-11-30'],
chengGuoTimeBucket: ['2017-12-06', '2017-12-12'],
scheduledStartTime: '2017-11-23',
validTime: '2017-12-02'
};
var timeInterval = {
day: 3600 * 1000 * 24,
month: 3600 * 1000 * 24 * 31,
year: 3600 * 1000 * 24 * 31 * 12,
};
var xAxisLabelUnit = {
year: false,
month: false,
day: false
}
function getProperTimeAxisInterval() {
xAxisLabelUnit.year = false;
xAxisLabelUnit.month = false;
xAxisLabelUnit.day = false;
var timeDataArray = getXAxisData();
var begin = getTimeMilliseconds(timeDataArray[timeDataArray.length - 1]);
console.log("begin " + begin);
var periodMillis = getTimeMilliseconds(timeDataArray[timeDataArray.length - 1]) - getTimeMilliseconds(timeDataArray[0]);
console.log("periodMillis " + periodMillis);
var years = periodMillis / timeInterval.year;
console.log("years " + years);
var months = periodMillis / timeInterval.month;
console.log("months " + months);
var days = periodMillis / timeInterval.day;
console.log("days " + days);
if (months <= 1) {
xAxisLabelUnit.day = true;
return timeInterval.day * 2;
} else if (months <= 16) {
xAxisLabelUnit.month = true;
return timeInterval.month;
} else if (months <= 24) {
xAxisLabelUnit.month = true;
return timeInterval.month * 2;
} else if (years <= 16) {
xAxisLabelUnit.year = true;
return timeInterval.year;
}
}
function getXAxisData() {
var arr = new Array();
arr = arr.concat(stageProgress.scheduledStartTime)
.concat(stageProgress.fangAnTimeBucket)
.concat(stageProgress.gangYaoTimeBucket)
.concat(stageProgress.chengGuoTimeBucket)
.concat(stageProgress.validTime).filter(function(item) {
return item != "-";
}).sort();
console.log(arr);
return arr;
}
function changeDateToMonthFirstDay(dateStr) {
var inputDate = new Date(dateStr);
inputDate.setDate(1);
var result = inputDate.getFullYear() + "-" +
(inputDate.getMonth() >= 9 ? inputDate.getMonth() + 1 : "0" +
(inputDate.getMonth() + 1)) + "-" + ("0" + 1);
return result;
}
function formatDateToStr(date) {
var inputMonth = date.getMonth();
var inputDate = date.getDate();
var result = date.getFullYear() +
"-" + (inputMonth >= 9 ? inputMonth + 1 : "0" + (inputMonth + 1)) +
"-" + (inputDate >= 9 ? inputDate : "0" + (inputDate));
return result;
}
var faOnTimeCompletionTime = getOnTimeCompletionTime('方案', stageProgress.fangAnTimeBucket[0], stageProgress.fangAnTimeBucket[
1]);
var gyOnTimeCompletionTime = getOnTimeCompletionTime('纲要', stageProgress.gangYaoTimeBucket[0], stageProgress.gangYaoTimeBucket[
1]);
var cgOnTimeCompletionTime = getOnTimeCompletionTime('成果', stageProgress.chengGuoTimeBucket[0], stageProgress.chengGuoTimeBucket[
1]);
var faOverTimeCompletionTime = getOverTimeCompletionTime('方案', stageProgress.fangAnTimeBucket[0], stageProgress.fangAnTimeBucket[
1]);
var gyOverTimeCompletionTime = getOverTimeCompletionTime('纲要', stageProgress.gangYaoTimeBucket[0], stageProgress.gangYaoTimeBucket[
1]);
var cgOverTimeCompletionTime = getOverTimeCompletionTime('成果', stageProgress.chengGuoTimeBucket[0], stageProgress.chengGuoTimeBucket[
1]);
var timeArray = {
beginTimeArr: [
getTimeMilliseconds(stageProgress.fangAnTimeBucket[0]),
getTimeMilliseconds(stageProgress.gangYaoTimeBucket[0]),
getTimeMilliseconds(stageProgress.chengGuoTimeBucket[0]),
],
onTimeCompletionTimeArr: [
getTimeMilliseconds(faOnTimeCompletionTime),
getTimeMilliseconds(gyOnTimeCompletionTime),
getTimeMilliseconds(cgOnTimeCompletionTime),
],
overTimeCompletionTimeArr: [
getTimeMilliseconds(faOverTimeCompletionTime),
getTimeMilliseconds(gyOverTimeCompletionTime),
getTimeMilliseconds(cgOverTimeCompletionTime),
],
};
var myChart = echarts.init(document.getElementById('content'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function(params) {
console.log("params[2]" + JSON.stringify(params[2]));
var info = params[0].axisValue + ":
";
info += params[0].seriesName + "：" + getSeriesDateStr(params[0].data) + "
";
info += "结束时间：" + (params[2].data != "-" && params[2].data != undefined && params[2].data != null&&!isNaN(params[2].data) ?
getSeriesDateStr(params[2].data) :
(!isNaN(params[1].data)&¶ms[1].data != undefined && params[1].data != null ? getSeriesDateStr(params[1].data) : "-"));
return info;
},
},
toolbox: {
right: '3%',
show: false,
feature: {
saveAsImage: {
show: true
}
}
},
legend: {
data: ['按时完成', '超时完成'],
tooltip: {
show: true,
},
itemWidth: 15,
itemHeight: 15,
textStyle: {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
},
itemGap: 120,
padding: 10,
},
grid: {
left: '3%',
right: '3%',
bottom: '2%',
containLabel: true,
},
xAxis: {
type: 'time',
min: function(value) {
return value.min + (getTimeMilliseconds(getProperTimeAxisBeginAndEndTime()[0]) - value.min);
},
max: function(value) {
return value.max + (getTimeMilliseconds(getProperTimeAxisBeginAndEndTime()[1]) - value.max);
},
interval: getProperTimeAxisInterval(),
axisLine: {
lineStyle: {
color: '#BDC8CD',
width: 1,
},
},
axisLabel: {
showMinLabel: false,
showMaxLabel: false,
rotate: 35,
margin: 12,
fontSize: 16,
color: '#1c2431',
formatter: function(value, index) {
var date = new Date(value);
var time = date.getFullYear();
if (xAxisLabelUnit.month) {
time += "." + (date.getMonth() + 1);
}
if (xAxisLabelUnit.day) {
time += "." + (date.getMonth() + 1) + '.' + date.getDate();
}
return time;
},
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: ['方\n案', '纲\n要', '成\n果'],
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#e9e9ea',
width: 1,
},
},
axisLabel: {
fontWeight: 'bold',
fontSize: 16,
color: '#1c2431',
fontFamily: 'Microsoft YaHei',
},
splitLine: {
show: true,
lineStyle: {
color: '#eaeae9',
width: 1,
},
},
},
series: [{
name: '开始时间',
type: 'bar',
stack: '时间',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
position: 'insideRight',
fontSize: 16,
color: '#1c2431',
fontFamily: 'Microsoft YaHei',
offset: [40, -20],
}
},
data: timeArray.beginTimeArr,
markLine: {
lineStyle: {
normal: {
color: '#0f77e9',
},
},
label: {
normal: {
fontWeight: 'bold',
padding: 2,
fontSize: 14,
fontFamily: 'Microsoft YaHei',
formatter: function(params) {
return '计划开始时间 ' + getSeriesDateStr(params.value);
},
},
},
data: [{
name: '计划开始时间',
xAxis: getTimeMilliseconds(stageProgress.scheduledStartTime),
}, ]
},
}, {
name: '按时完成',
type: 'bar',
stack: '时间',
itemStyle: {
normal: {
color: '#0f77e9'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
fontSize: 16,
color: '#1c2431',
position: 'right',
fontFamily: 'Microsoft YaHei',
offset: [-45, -20],
}
},
data: timeArray.onTimeCompletionTimeArr,
markLine: {
lineStyle: {
normal: {
color: '#ff4747',
},
},
label: {
normal: {
fontWeight: 'bold',
padding: 2,
fontSize: 14,
fontFamily: 'Microsoft YaHei',
formatter: function(params) {
return '计划完成时间 ' + getSeriesDateStr(params.value);
},
},
},
data: [{
name: '有效期',
xAxis: getTimeMilliseconds(stageProgress.validTime),
}, ]
},
}, {
name: '超时完成',
type: 'bar',
stack: '时间',
itemStyle: {
normal: {
color: '#ff4747'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
fontSize: 16,
color: '#1c2431',
offset: [-45, -20],
position: 'right',
fontFamily: 'Microsoft YaHei',
}
},
data: timeArray.overTimeCompletionTimeArr,
barWidth: 20,
}, ]
};
myChart.setOption(option);
function getSeriesDateStr(timeObject) {
if (timeObject == "-") {
return timeObject;
}
var date = new Date(timeObject);
var dateStr = '';
dateStr += date.getFullYear() + '.';
dateStr += date.getMonth() + 1 + '.';
dateStr += date.getDate();
return dateStr;
};
function getOnTimeCompletionTime(stage, stageBeginTimeStr, stageCompletionTimeStr) {
var validTimeMillis = getTimeMilliseconds(stageProgress.validTime);
var stageBeginTimeMillis = getTimeMilliseconds(stageBeginTimeStr);
var stageCompletionTimeMillis = getTimeMilliseconds(stageCompletionTimeStr);
if (validTimeMillis <= stageBeginTimeMillis) {
return '-';
}
if (validTimeMillis > stageBeginTimeMillis && validTimeMillis < stageCompletionTimeMillis) {
return stageProgress.validTime;
}
if (validTimeMillis >= stageCompletionTimeMillis) {
return stageCompletionTimeStr;
}
}
function getOverTimeCompletionTime(stage, stageBeginTimeStr, stageCompletionTimeStr) {
var validTimeMillis = getTimeMilliseconds(stageProgress.validTime);
var stageBeginTimeMillis = getTimeMilliseconds(stageBeginTimeStr);
var stageCompletionTimeMillis = getTimeMilliseconds(stageCompletionTimeStr);
if (validTimeMillis < stageCompletionTimeMillis) {
return stageCompletionTimeStr;
}
if (validTimeMillis >= stageCompletionTimeMillis) {
return '-';
}
}
function getTimeMilliseconds(timeStr) {
return (new Date(timeStr)).getTime();
}
function getProperTimeAxisBeginAndEndTime() {
var xAxis = getXAxisData();
var begin = xAxis[0];
var end = xAxis[xAxis.length - 1];
var beginDate = new Date(begin);
var endDate = new Date(end);
if (xAxisLabelUnit.month) {
beginDate.setDate(1);
endDate.setMonth(endDate.getMonth() + 1);
endDate.setDate(1);
} else {
var daysCount = getProperTimeAxisInterval() / timeInterval.day;
console.log("daysCount " + daysCount);
beginDate.setDate(beginDate.getDate() - daysCount);
endDate.setDate(endDate.getDate() + daysCount);
}
var beArr = [formatDateToStr(beginDate), formatDateToStr(endDate)];
console.log("beArr " + beArr);
return beArr;
}
script>
html>
