echarts制作甘特图

html

<div id="SpeciaEchartBox" style="width: 90%;height:500px; margin:0 auto"></div>
</div>

initEchartBox: function() {
    var chartBox = echarts.init(document.getElementById('echartBox'));
    function dateAfter(dateStr, num) {
    var date1 = new Date(Date.parse(dateStr.replace(/-/g, "/")));

   var date2 = new Date(date1);
   date2.setDate(date1.getDate() + num);
   var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
   return times;
}

function GetDateDiff(startDate, endDate) {
   var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
   var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
  var dates = (startTime - endTime) / (1000 * 60 * 60 * 24);
  return dates;
}
var totalCategory = 0,
category = [],
planData = [],
planBase = [],
actualData = [],
actualBase = [],
legend = [];
var globalmin = null;
var json = {
"currStageIndexList": [
8,
9
],
"currStageList": [
"初步验收",
"试运行"
],
"stageList": [{
"planBeginDate": "2018-03-31",
"name": "各级风委会机制常态化",
"endDate": "2018-05-01",
"beginDate": "2018-04-03",
"planEndDate": "2018-04-06"
}, {
"planBeginDate": "2018-02-05",
"name": "统筹管理企业风险信息",
"endDate": "2018-03-22",
"beginDate": "2018-02-07",
"planEndDate": "2018-03-12"
}, {
"planBeginDate": "2018-04-12",
"name": "统筹应用资金分级授权",
"endDate": "2018-04-31",
"beginDate": "2018-04-22",
"planEndDate": "2018-04-28"
}, {
"planBeginDate": "2018-03-26",
"name": "统筹建设财务管理标准体系",
"endDate": "2018-04-22",
"beginDate": "2018-03-22",
"planEndDate": "2018-04-25"
}, {
"planBeginDate": "2018-01-25",
"name": "重大风险预判预控",
"endDate": "2018-02-28",
"beginDate": "2018-01-26",
"planEndDate": "2018-02-25"
},

],
"projectId": 8211
};
if (json && json.stageList) {
totalCategory = json.stageList.length;
var minPlan = null,
minActual = null,
max = null;
for (var i = (totalCategory - 1); i >= 0; i--) {
var planStart = json.stageList[i].planBeginDate;
var actualStart = json.stageList[i].beginDate;
if (i == (json.stageList.length - 1)) {
var dateTT = new Date();
var dstr = dateTT.getFullYear() + "-" + (dateTT.getMonth() + 1) + "-" + dateTT.getDate();
minPlan = planStart || dstr;
minActual = actualStart || dstr;
max = planStart;
}

console.log(max)
if (GetDateDiff(max, json.stageList[i].planEndDate) < 0) {
max = json.stageList[i].planEndDate;
}
if (GetDateDiff(max, json.stageList[i].endDate) < 0) {
max = json.stageList[i].endDate;
}
if (GetDateDiff(minPlan, planStart) > 0) {
minPlan = planStart;
}
if (GetDateDiff(minActual, actualStart) > 0) {
minActual = actualStart;
}
}
var min = null;
if (GetDateDiff(minPlan, minActual) >= 0) {
min = minActual;
} else {
min = minPlan;
}
globalmin = min;
for (var i = (totalCategory - 1); i >= 0; i--) {
var planStart = json.stageList[i].planBeginDate;
var planEnd = json.stageList[i].planEndDate;
var actualStart = json.stageList[i].beginDate;
var actualEnd = json.stageList[i].endDate;

category.push(json.stageList[i].name);
planBase.push(GetDateDiff(planStart, globalmin));
var pd = {};
pd.value = GetDateDiff(actualEnd, actualStart);
pd.color = '#FF0000';
var currentStage = json.currStageList;
var sName = json.stageList[i].name;
if (currentStage && $.inArray(sName, currentStage) > -1) {
pd.color = '#FFFF00';
}
planData.push(GetDateDiff(planEnd, planStart));
actualBase.push(GetDateDiff(actualStart, globalmin));
actualData.push(pd);

}
for (var i = 0; i < GetDateDiff(max, min); i++) {
var dt = dateAfter(min, i);
legend.push(dt);
}
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
var tar0 = params[0];
var tar1 = params[1];
var tar2 = params[2]
var tar3 = params[3];
var result = tar2.seriesName + ' : ' + dateAfter(globalmin, tar2.value - 0) + '<br/>' +
tar3.seriesName + ' : ' + dateAfter(globalmin, tar2.value + tar3.value) + '<br/>' +
tar0.seriesName + ' : ' + dateAfter(globalmin, tar0.value - 0) + '<br/>' +
tar1.seriesName + ' : ' + dateAfter(globalmin, tar0.value + tar1.value);
return result;
}
},
xAxis: [{
type: 'value',

splitNumber: legend.length - 1,
max: legend.length - 1,
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}, {
type: 'category',
position: 'bottom',
boundaryGap: false,
data: legend,

}],
yAxis: [{
type: 'category',
splitLine: {
show: false
},
data: category
}],
series: [{
name: '实际开始时间',
type: 'bar',
stack: '总量1',
barWidth: '20',

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)'
}
},
data: actualBase
}, {
name: '实际完成时间',
type: 'bar',
barWidth: '20',
barGap: '0',
stack: '总量1',
itemStyle: {
normal: {
color: function(params) {
//alert(JSON.stringify(params));
return 'rgba(175, 220, 240, 1)';
},
label: {
show: true,
position: 'inside'
}
}
},
data: actualData
}, {
name: '计划开始时间',
type: 'bar',
stack: '总量',
barWidth: '20',
barGap: '0',
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)'
}
},
data: planBase
}, {
name: '计划完成时间',
type: 'bar',
stack: '总量',
barWidth: '20',
barGap: '0',
itemStyle: {
normal: {
color: 'rgba(102, 255, 0, 0.498039215686275)',
label: {
show: true,
position: 'inside'
}
}
},
data: planData
}]
};

}
// 使用刚指定的配置项和数据显示图表。
chartBox.setOption(option);
window.onresize = chartBox.resize;

• },

 

转载于:https://www.cnblogs.com/yazhng/p/9100711.html