图形覆盖 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) {
var obj_model = dataSource;
if (obj_model.PlanStartDate != null) {
obj_model.PlanStartDate = obj_model.PlanStartDate.substring(0, 10);
obj_model.PlanStartDate = obj_model.PlanStartDate+" 00:00:00";
}
if (obj_model.PlanCloseDate != null) {
obj_model.PlanCloseDate = obj_model.PlanCloseDate.substring(0, 10);
obj_model.PlanCloseDate = obj_model.PlanCloseDate+" 23:59:59";
}
if (obj_model.PlanStartDate2 != null) {
obj_model.PlanStartDate2 = obj_model.PlanStartDate2.substring(0, 10);
obj_model.PlanStartDate2 = obj_model.PlanStartDate2+" 00:00:00";
}
if (obj_model.PlanCloseDate2 != null) {
obj_model.PlanCloseDate2 = obj_model.PlanCloseDate2.substring(0, 10);
obj_model.PlanCloseDate2 = obj_model.PlanCloseDate2+" 23:59:59";
}
if (obj_model.RealityStartDate != null) {
obj_model.RealityStartDate = obj_model.RealityStartDate.substring(0, 10);
obj_model.RealityStartDate = obj_model.RealityStartDate+" 00:00:00";
}
if (obj_model.RealityCloseDate != null) {
obj_model.RealityCloseDate = obj_model.RealityCloseDate.substring(0, 10);
obj_model.RealityCloseDate = obj_model.RealityCloseDate+" 23:59:59";
}
if (obj_model.RealityTestStartDate != null) {
obj_model.RealityTestStartDate = obj_model.RealityTestStartDate.substring(0, 10);
obj_model.RealityTestStartDate = obj_model.RealityTestStartDate+" 00:00:00";
}
if (obj_model.RealityTestCloseDate != null) {
obj_model.RealityTestCloseDate = obj_model.RealityTestCloseDate.substring(0, 10);
obj_model.RealityTestCloseDate = obj_model.RealityTestCloseDate+" 23:59:59";
}
if (obj_model.DatabaseDesignStartDate != null) {
obj_model.DatabaseDesignStartDate = obj_model.DatabaseDesignStartDate.substring(0, 10);
obj_model.DatabaseDesignStartDate = obj_model.DatabaseDesignStartDate+" 00:00:00";
}
if (obj_model.DatabaseDesignCloseDate != null) {
obj_model.DatabaseDesignCloseDate = obj_model.DatabaseDesignCloseDate.substring(0, 10);
obj_model.DatabaseDesignCloseDate = obj_model.DatabaseDesignCloseDate+" 23:59:59";
}
if (obj_model.InterfaceDesignStartDate != null) {
obj_model.InterfaceDesignStartDate = obj_model.InterfaceDesignStartDate.substring(0, 10);
obj_model.InterfaceDesignStartDate = obj_model.InterfaceDesignStartDate+" 00:00:00";
}
if (obj_model.InterfaceDesignCloseDate != null) {
obj_model.InterfaceDesignCloseDate = obj_model.InterfaceDesignCloseDate.substring(0, 10);
obj_model.InterfaceDesignCloseDate = obj_model.InterfaceDesignCloseDate+" 23:59:59";
}
if (obj_model.BackendStartDate != null) {
obj_model.BackendStartDate = obj_model.BackendStartDate.substring(0, 10);
obj_model.BackendStartDate = obj_model.BackendStartDate+" 00:00:00";
}
if (obj_model.BackendCloseDate != null) {
obj_model.BackendCloseDate = obj_model.BackendCloseDate.substring(0, 10);
obj_model.BackendCloseDate = obj_model.BackendCloseDate+" 23:59:59";
}
if (obj_model.FrontendStartDate != null) {
obj_model.FrontendStartDate = obj_model.FrontendStartDate.substring(0, 10);
obj_model.FrontendStartDate = obj_model.FrontendStartDate+" 00:00:00";
}
if (obj_model.FrontendCloseDate != null) {
obj_model.FrontendCloseDate = obj_model.FrontendCloseDate.substring(0, 10);
obj_model.FrontendCloseDate = obj_model.FrontendCloseDate+" 23:59:59";
}
if (obj_model.DatabaseDesignPreStartDate != null) {
obj_model.DatabaseDesignPreStartDate = obj_model.DatabaseDesignPreStartDate.substring(0, 10);
obj_model.DatabaseDesignPreStartDate = obj_model.DatabaseDesignPreStartDate+" 00:00:00";
}
if (obj_model.DatabaseDesignPreCloseDate != null) {
obj_model.DatabaseDesignPreCloseDate = obj_model.DatabaseDesignPreCloseDate.substring(0, 10);
obj_model.DatabaseDesignPreCloseDate = obj_model.DatabaseDesignPreCloseDate+" 23:59:59";
}
if (obj_model.InterfaceDesignPreStartDate != null) {
obj_model.InterfaceDesignPreStartDate = obj_model.InterfaceDesignPreStartDate.substring(0, 10);
obj_model.InterfaceDesignPreStartDate = obj_model.InterfaceDesignPreStartDate+" 00:00:00";
}
if (obj_model.InterfaceDesignPreCloseDate != null) {
obj_model.InterfaceDesignPreCloseDate = obj_model.InterfaceDesignPreCloseDate.substring(0, 10);
obj_model.InterfaceDesignPreCloseDate = obj_model.InterfaceDesignPreCloseDate+" 23:59:59";
}
if (obj_model.BackendPreStartDate != null) {
obj_model.BackendPreStartDate = obj_model.BackendPreStartDate.substring(0, 10);
obj_model.BackendPreStartDate = obj_model.BackendPreStartDate+" 00:00:00";
}
if (obj_model.BackendPreCloseDate != null) {
obj_model.BackendPreCloseDate = obj_model.BackendPreCloseDate.substring(0, 10);
obj_model.BackendPreCloseDate = obj_model.BackendPreCloseDate+" 23:59:59";
}
if (obj_model.FrontendPreStartDate != null) {
obj_model.FrontendPreStartDate = obj_model.FrontendPreStartDate.substring(0, 10);
obj_model.FrontendPreStartDate = obj_model.FrontendPreStartDate+" 00:00:00";
}
if (obj_model.FrontendPreCloseDate != null) {
obj_model.FrontendPreCloseDate = obj_model.FrontendPreCloseDate.substring(0, 10);
obj_model.FrontendPreCloseDate = obj_model.FrontendPreCloseDate+" 23:59:59";
}
let title = "项目实施进度表";
title = $("#sc_pis").text();
let xAxisData = [];
let yAxisData = [];
let beginTimeArr = [];//实际开始时间
let onTimeCompletionTimeArr = [];//按时完成
let overTimeCompletionTimeArr = [];//超时完成
let planbeginTimeArr = [];//计划开始时间
let planCompletionTimeArr = [];//计划结束时间
var dataTitle = []; //, '预计测试时间'
const startData = [];
const endData =[];
var onTime=null;//按时时间
var overTime=null;//超时时间
if(obj_model.PlanStartDate!=null){
dataTitle.push("预计开发时间");
yAxisData.push("预计开发时间");
startData.push(obj_model.PlanStartDate);
endData.push(obj_model.PlanCloseDate);
beginTimeArr.push(getTimeMilliseconds('-'));
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
planbeginTimeArr.push(getTimeMilliseconds(obj_model.PlanStartDate));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.PlanCloseDate));
}
const colors = ['#007acc','green','red']; // 自定义调色盘的颜色
const stylecolors = [colors[0]]; // 自定义调色盘的颜色
if (obj_model.DevelopContent != null && obj_model.DevelopContent != "") {
var listDevelop = obj_model.DevelopContent.split(',');
if (listDevelop.indexOf("DatabaseDesign") != -1) {
dataTitle.push("数据库设计预计时间");
yAxisData.push("数据库设计");
startData.push(obj_model.DatabaseDesignPreStartDate);
endData.push(obj_model.DatabaseDesignPreCloseDate);
stylecolors.push(colors[0]);
planbeginTimeArr.push(getTimeMilliseconds(obj_model.DatabaseDesignPreStartDate));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.DatabaseDesignPreCloseDate));
dataTitle.push("数据库设计实际时间");
startData.push(obj_model.DatabaseDesignStartDate);
endData.push(obj_model.DatabaseDesignCloseDate);
//如果结束时间少于预计时间，显示绿色 否则红色
if(obj_model.DatabaseDesignCloseDate<=obj_model.DatabaseDesignPreCloseDate){
stylecolors.push(colors[1]);
}else{
stylecolors.push(colors[2]);
}
beginTimeArr.push(getTimeMilliseconds(obj_model.DatabaseDesignStartDate));
onTime = getOnTimeCompletionTime('数据库设计', obj_model.DatabaseDesignStartDate, obj_model.DatabaseDesignCloseDate, obj_model.DatabaseDesignPreCloseDate);
overTime=getOverTimeCompletionTime('数据库设计', obj_model.DatabaseDesignStartDate, obj_model.DatabaseDesignCloseDate, obj_model.DatabaseDesignPreCloseDate);
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
}
if (listDevelop.indexOf("InterfaceDesign") != -1) {
dataTitle.push("接口设计预计时间");
yAxisData.push("接口设计");
startData.push(obj_model.InterfaceDesignPreStartDate);
endData.push(obj_model.InterfaceDesignPreCloseDate);
stylecolors.push(colors[0]);
planbeginTimeArr.push(getTimeMilliseconds(obj_model.InterfaceDesignPreStartDate));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.InterfaceDesignPreCloseDate));
dataTitle.push("接口设计实际时间");
startData.push(obj_model.InterfaceDesignStartDate);
endData.push(obj_model.InterfaceDesignCloseDate);
if(obj_model.InterfaceDesignCloseDate<=obj_model.InterfaceDesignPreCloseDate){
stylecolors.push(colors[1]);
}else{
stylecolors.push(colors[2]);
}
beginTimeArr.push(getTimeMilliseconds(obj_model.InterfaceDesignStartDate));
onTime = getOnTimeCompletionTime('接口设计', obj_model.InterfaceDesignStartDate, obj_model.InterfaceDesignCloseDate, obj_model.InterfaceDesignPreCloseDate);
overTime=getOverTimeCompletionTime('接口设计', obj_model.InterfaceDesignStartDate, obj_model.InterfaceDesignCloseDate, obj_model.InterfaceDesignPreCloseDate);
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
}
if (listDevelop.indexOf("BackendDevelopment") != -1) {
dataTitle.push("后端开发预计时间");
yAxisData.push("后端开发");
startData.push(obj_model.BackendPreStartDate);
endData.push(obj_model.BackendPreCloseDate);
stylecolors.push(colors[0]);
planbeginTimeArr.push(getTimeMilliseconds(obj_model.BackendPreStartDate));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.BackendPreCloseDate));
dataTitle.push("后端开发实际时间");
startData.push(obj_model.BackendStartDate);
endData.push(obj_model.BackendCloseDate);
if(obj_model.BackendCloseDate<=obj_model.BackendPreCloseDate){
stylecolors.push(colors[1]);
}else{
stylecolors.push(colors[2]);
}
beginTimeArr.push(getTimeMilliseconds(obj_model.BackendStartDate));
onTime = getOnTimeCompletionTime('后端开发', obj_model.BackendStartDate, obj_model.BackendCloseDate, obj_model.BackendPreCloseDate);
overTime=getOverTimeCompletionTime('后端开发', obj_model.BackendStartDate, obj_model.BackendCloseDate, obj_model.BackendPreCloseDate);
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
}
if (listDevelop.indexOf("FrontendDevelopment") != -1) {
dataTitle.push("前端开发预计时间");
yAxisData.push("前端开发");
startData.push(obj_model.FrontendPreStartDate);
endData.push(obj_model.FrontendPreCloseDate);
stylecolors.push(colors[0]);
planbeginTimeArr.push(getTimeMilliseconds(obj_model.FrontendPreStartDate));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.FrontendPreCloseDate));
dataTitle.push("前端开发实际时间");
startData.push(obj_model.FrontendStartDate);
endData.push(obj_model.FrontendCloseDate);
if(obj_model.FrontendCloseDate<=obj_model.FrontendPreCloseDate){
stylecolors.push(colors[1]);
}else{
stylecolors.push(colors[2]);
}
beginTimeArr.push(getTimeMilliseconds(obj_model.FrontendStartDate));
console.log("getOnTimeCompletionTime-getOverTimeCompletionTime");
console.log("obj_model.FrontendStartDate",obj_model.FrontendStartDate);
console.log("obj_model.FrontendCloseDate",obj_model.FrontendCloseDate);
console.log("obj_model.FrontendPreCloseDate",obj_model.FrontendPreCloseDate);
onTime = getOnTimeCompletionTime('前端开发', obj_model.FrontendStartDate, obj_model.FrontendCloseDate, obj_model.FrontendPreCloseDate);
overTime=getOverTimeCompletionTime('前端开发', obj_model.FrontendStartDate, obj_model.FrontendCloseDate, obj_model.FrontendPreCloseDate);
console.log("onTime-overTime",onTime,overTime);
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
}
}
if (obj_model.PlanStartDate2 != null) {
dataTitle.push("预计测试时间");
yAxisData.push("测试阶段");
startData.push(obj_model.PlanStartDate2);
endData.push(obj_model.PlanCloseDate2);
stylecolors.push(colors[0]);
planbeginTimeArr.push(getTimeMilliseconds(obj_model.PlanStartDate2));
planCompletionTimeArr.push(getTimeMilliseconds(obj_model.PlanCloseDate2));
beginTimeArr.push(getTimeMilliseconds(obj_model.RealityTestStartDate));
onTime = getOnTimeCompletionTime('测试', obj_model.RealityTestStartDate, obj_model.RealityTestCloseDate, obj_model.PlanCloseDate2);
overTime=getOverTimeCompletionTime('测试', obj_model.RealityTestStartDate, obj_model.RealityTestCloseDate, obj_model.PlanCloseDate2);
onTimeCompletionTimeArr.push(getTimeMilliseconds(onTime));
overTimeCompletionTimeArr.push(getTimeMilliseconds(overTime));
}
if (obj_model.RealityTestStartDate != null) {
dataTitle.push("实际测试时间");
startData.push(obj_model.RealityTestStartDate);
endData.push(obj_model.RealityTestCloseDate);
if(obj_model.RealityTestCloseDate<=obj_model.PlanCloseDate2){
stylecolors.push(colors[1]);
}else{
stylecolors.push(colors[2]);
}
}
// var startTimeData = startData.map(item => item + ' 00:00:00');
var startTimeData = startData;
// var endTimeData = endData.map(item => item + ' 23:59:59');
var endTimeData = endData;
if(startData.length>0&&endData.length>0){
let sxtime = dateTimeMinMax(startTimeData);
let extime = dateTimeMinMax(endTimeData);
let xtime = dateTimeMinMax([sxtime.minDate,sxtime.maxDate,extime.minDate,extime.maxDate]);
xAxisData = continuousDateTime(xtime.minDate,xtime.maxDate);
}
/**
* 时间数组
*/
var timeArray = {
// 实际开始时间
beginTimeArr: [],
// 按时完成时间
onTimeCompletionTimeArr: [],
// 超时完成时间
overTimeCompletionTimeArr: [],
// 计划开始时间
planbeginTimeArr: [],
// 计划结束时间
planCompletionTimeArr: [],
};
timeArray.beginTimeArr=beginTimeArr;
timeArray.onTimeCompletionTimeArr=onTimeCompletionTimeArr;
timeArray.overTimeCompletionTimeArr=overTimeCompletionTimeArr;
timeArray.planbeginTimeArr=planbeginTimeArr;
timeArray.planCompletionTimeArr=planCompletionTimeArr;
//添加数据
xDataset=[];
xDataset=startData;
xDataset.concat(endData);
// 初始化图表
var myChart = echarts.init(document.getElementById('chart2'));
// 构建图表配置项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
/**
* 也可以使用 formatter: '{b0}:<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
* 但是这样当鼠标指向纵坐标的三个阶段中的某一个时，即使该阶段 没有按时完成，或者 没有超时，
* 也会显示 按时 或 超时 的 tooltip
*/
formatter: function(params) {
// console.log("params" + JSON.stringify(params));
console.log("params",params[0].data);
// console.log("params[0]" + JSON.stringify(params[0]));
// console.log("params[1]" + JSON.stringify(params[1]));
// console.log("params[2]" + JSON.stringify(params[2]));
var info = params[0].axisValue + ":<br />";
if(params[0].data!='-'&¶ms[0].data!=0&&(!isNaN(params[2].data)||!isNaN(params[1].data)||!isNaN(params[0].data))){
info += params[0].seriesName + "：" + getSeriesDateStr(params[0].data) + "<br />";
info += "结束时间："
+ (params[2].data != "-" && params[2].data != undefined && params[2].data != null && !isNaN(params[2].data) ?getSeriesDateStr(params[2].data) :
(!isNaN(params[1].data) && params[1].data != undefined && params[1].data != null ? getSeriesDateStr(params[1].data) : "-"))
+ "<br />";
}
info+=params[3].seriesName+"："+getSeriesDateStr(params[3].data) + "<br />";
info+="计划完成时间："+getSeriesDateStr(params[4].data);
return info;
},
},
/**
* 右上角工具栏
*/
toolbox: {
right: '3%',
show: false,
feature: {
/**
* 数据视图
*/
// dataView:{
// show:true,
// },
saveAsImage: {
show: true
}
}
},
/**
* 图例
*/
legend: {
data: ['按时', '超时', '计划'],
tooltip: {
show: true,
},
itemWidth: 15,
itemHeight: 15,
textStyle: {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
},
itemGap: 80,
padding: 10,
},
/**
* 直角坐标系内绘图网格
*/
grid: {
left: '3%',
right: '3%',
bottom: '2%',
/**
* grid 区域是否包含坐标轴的刻度标签。
*/
containLabel: true,
},
/**
* 横坐标
*/
xAxis: {
// /**
// * 坐标轴指示器
// */
// axisPointer: {
// show: true,
// },
/**
* 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，
* 在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
*/
type: 'time',
/**
* value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最大值。
*
* 坐标轴刻度最小值。
*/
min: function(value) {
return value.min + (getTimeMilliseconds(getProperTimeAxisBeginAndEndTime()[0]) - value.min);
},
/**
* value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最大值。
*
* 坐标轴刻度最大值。
*/
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() + "." + (date.getMonth() + 1) + "." + date.getDate();
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果'],
data: yAxisData,
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: '#ffffff',
color: '#ffffff'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
position: 'insideRight',
fontSize: 16,
color: '#1c2431',
fontFamily: 'Microsoft YaHei',
offset: [40, -15],
}
},
data: timeArray.beginTimeArr,
/**
* 柱状图宽度
*/
barWidth: 15,
barCategoryGap:'50%',
// zlevel: 3, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 20, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
}, {
name: '按时',
type: 'bar',
stack: '时间',
itemStyle: {
normal: {
color: '#0f77e9'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: false,
fontSize: 16,
color: '#1c2431',
position: 'right',
fontFamily: 'Microsoft YaHei',
offset: [-45, -15],
}
},
data: timeArray.onTimeCompletionTimeArr,
/**
* 柱状图宽度
*/
barWidth: 15,
barCategoryGap:'50%',
// zlevel: 2, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 10, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
}, {
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, -15],
position: 'right',
fontFamily: 'Microsoft YaHei',
}
},
data: timeArray.overTimeCompletionTimeArr,
/**
* 柱状图宽度
*/
barWidth: 15,
barCategoryGap:'50%',
// zlevel: 1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 1, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
},
{
name: '计划开始时间',
type: 'bar',
stack: '计划',
itemStyle: {
normal: {
barBorderColor: '#ffffff',
color: '#ffffff'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
position: 'insideRight',
fontSize: 16,
color: '#1c2431',
fontFamily: 'Microsoft YaHei',
// offset: [40, -20],
offset: [45, 18],
}
},
data: timeArray.planbeginTimeArr,
/**
* 柱状图宽度
*/
barWidth: 15,
barCategoryGap:'50%',
// zlevel: 2, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 20, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
},
{
name: '计划',
type: 'bar',
stack: '计划',
itemStyle: {
normal: {
color: '#FFA500'
}
},
label: {
normal: {
formatter: function(params) {
return getSeriesDateStr(params.value);
},
show: true,
fontSize: 16,
color: '#1c2431',
// offset: [-45, -20],
position: 'right',
offset: [-45, 18],
fontFamily: 'Microsoft YaHei',
}
},
data: timeArray.planCompletionTimeArr,
/**
* 柱状图宽度
*/
barWidth: 15,
barCategoryGap:'50%',
// zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 1, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
}
]
};
myChart.clear(); //清空之前的渲染
// 将构建好的配置项传入echarts
myChart.setOption(option);
fun();
}
效果
1809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
