echarts 甘特图

图形覆盖 zlevel, z

柱状图所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。



柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。

完整代码

		/**
		 * 横坐标轴时间刻度可选值
		 * 这里 month和year 没有考虑平闰年之分
		 */
		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 <= 3) {
   
				xAxisLabelUnit.day = true;
				return timeInterval.day * 5;
			} 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;
			}
		}
		
		
		var xDataset=[];
		/**
		 * 获取横轴坐标数据源，这里横坐标只显示年月
		 * 最小值取传入数据最小的时间再减小一个月
		 * 最大值取传入数据最小的时间再增加一个月
		 */
		function getXAxisData() {
   
			var arr = new Array();
			arr = arr
				.concat(xDataset)
				.filter(function(item) {
   
					return item != "-";
				}).sort();
				
			return arr;
		}
		
		/**
		 * 更改日期字符串为相应月份的第一天
		 * @param {Object} dateStr 日期字符串
		 */
		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;
		}
		
		/**
		 * 获取格式化的日期 YYYY-MM-dd
		 */
		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;
		}
		
		/**
		 * 时间对象转日期字符串 yyyy.MM.dd
		 * @param {Object} timeObject 毫秒值或时间字符串
		 */
		function getSeriesDateStr(timeObject) {
   
			if(timeObject == "-" || timeObject == 0 ) {
   
				return timeObject;
			}
			
			var date = new Date(timeObject);
			var dateStr = '';
			dateStr += date.getFullYear() + '.';
			dateStr += date.getMonth() + 1 + '.';
			dateStr += date.getDate();
			return dateStr;
		};
		
		/**
		 * 获取阶段的计划内完成时间（蓝色柱状图值）
		 * @param {Object} stage 阶段
		 * @param {Object} stateBeginTime 阶段实际开始时间
		 * @param {Object} stateCompletionTime 阶段实际完成时间
		 * @param{Object} stagePlanCompletionTimeStr 阶段计划完成时间
		 */
		function getOnTimeCompletionTime(stage, stageBeginTimeStr, stageCompletionTimeStr, stagePlanCompletionTimeStr) {
   
			var validTimeMillis = getTimeMilliseconds(stagePlanCompletionTimeStr);
			var stageBeginTimeMillis = getTimeMilliseconds(stageBeginTimeStr);
			var stageCompletionTimeMillis = getTimeMilliseconds(stageCompletionTimeStr);
			if(validTimeMillis <= stageBeginTimeMillis) {
   
				// 若阶段开始时间大于等于有效期，则项目超时完成，有效时间为'-'
				return '-';
			}
			if(validTimeMillis > stageBeginTimeMillis && validTimeMillis < stageCompletionTimeMillis) {
   
				// 若有效期介于阶段完成时间和阶段开始时间之间，则该阶段按时完后时间(实际该阶段是超时完成的)即蓝色柱状图的终值为有效期
				return stagePlanCompletionTimeStr;
			}
			if(validTimeMillis >= stageCompletionTimeMillis) {
   
				// 若有效期大于等于阶段完成时间，则阶段按时完成
				return stageCompletionTimeStr;
			}
		}
		
		/**
		 * 获取阶段内的超时完成时间（红色色柱状图值）
		 * @param {Object} stage 阶段
		 * @param {Object} stateBeginTime
		 * @param {Object} stateCompletionTime
		 * @param{Object} stagePlanCompletionTimeStr 阶段计划完成时间
		 */
		function getOverTimeCompletionTime(stage, stageBeginTimeStr, stageCompletionTimeStr, stagePlanCompletionTimeStr) {
   
			var validTimeMillis = getTimeMilliseconds(stagePlanCompletionTimeStr);//计划结束时间
			var stageBeginTimeMillis = getTimeMilliseconds(stageBeginTimeStr);
			var stageCompletionTimeMillis = getTimeMilliseconds(stageCompletionTimeStr);
			if(validTimeMillis < stageCompletionTimeMillis) {
   
				// 阶段完成时间大于有效期，则将阶段完成时间作为超时时间返回
				return stageCompletionTimeStr;
			}
		
			if(validTimeMillis >= stageCompletionTimeMillis) {
   
				// 阶段完成时间小于等于有效期，则阶段按时完成，超时时间应为'-'
				return '-';
			}
		}
		
		/**
		 * 根据时间字符串获取对应的毫秒值
		 * @param {Object} timeStr 时间字符串
		 */
		function getTimeMilliseconds(timeStr) {
   
			if(timeStr==null){
   
				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);
				beginDate.setDate(beginDate.getDate() - 1);
				// endDate.setDate(endDate.getDate() + daysCount);
				endDate.setDate(endDate.getDate() + 2);
				// console.log("daysCount " + daysCount);
			}
			var beArr = [formatDateToStr(beginDate), formatDateToStr(endDate)];
			console.log("beArr " + beArr);
			return beArr;
		}
		
		
		function loadingCharts(dataSource,fun) {