echarts2实现双柱的甘特图_echarts绘制甘特图

在setoption之后添加这段代码：window.addEventListener('resize', function () {

myChart.resize();

});

图表就能随着窗口大小，自动适应，且支持一页多图。

效果图：

html代码：

特别注意点：

xAxis : [

{

type : 'value',

splitNumber: legend.length-1,

max: legend.length-1,...

此处的splitNumber 和 max决定了x轴的分栏线是否重合(因为有上下两组数据，可能会出现分栏线不一致情况)

报表

图例：计划时长 已完成阶段的实际时长 未完成阶段的实际时长

require.config({

paths: {

echarts: 'dist'

}

});

function dateAfter(dateStr,num){

var date1 = new Date(Date.parse(dateStr.replace(/-/g,   "/")));

//alert(date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate());

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 url = "${path}/notice/groupFirstCheckNotice!initGantt.action?projectId=${resultjson.projectId}";

var totalCategory = 0,category=[],planData=[],planBase=[],actualData=[],actualBase=[],legend=[];

var globalmin = null;

var json = {

"currStageIndexList": [

8,

9

],

"currStageList": [

"初步验收",

"试运行"

],

"stageList": [

{

"planBeginDate": "2016-08-31",