echarts按开始日期和结束时间做报表
做这个报表之前首先要了解时间是怎么累加的，假如说我的开始是2015-8-25，15天完成，后面的时间给2015-9-9是不对的，echarts的的值是累加的，做这个需求的时候因为时间累加的问题耽误了一整天。不过我在做显示日期的时候发现他是一串数字，由此联想到日期其实是一串数字。查了一下资料，原来是1970-1-1后累加的毫秒数。
| 任务 | 要求开始 | 消耗天数 | 要求完成 | 实际开始 | 实际完成 |
| 配置确认 | 2015-8-25 | 15 | 2015-9-9 | 2015-8-25 | 2015-9-9 |
| 供方资源可用 | 2015-8-25 | 28 | 2015-9-22 | 2015-8-25 | 2015-10-7 |
| 招标申请 | 2015-9-22 | 3 | 2015-9-25 | 2015-10-7 | 2015-10-10 |
| 招标定标 | 2015-9-25 | 10 | 2015-10-5 | 2015-10-10 | 2015-10-12 |
| 代码申请 | 2015-10-5 | 2 | 2015-10-7 | 2015-10-12 | 2015-10-14 |
| 代码发放 | 2015-10-7 | 2 | 2015-10-9 | 2015-10-14 | 2015-10-16 |
| 采购计划下达 | 2015-10-9 | 3 | 2015-10-12 | 2015-10-16 | 2015-10-19 |
| 采购合同下达 | 2015-10-12 | 5 | 2015-10-17 | 2015-10-19 | 2015-10-24 |
| 首次承诺到货时间 | 2015-10-17 | 3 | 2015-10-20 | 2015-10-24 | 2015-10-27 |
<!DOCTYPE html>
<head><meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts-all.js"></script>
<script type="text/javascript">
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: '计划任务报表',
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params){
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + new Date(params[0].value).Format('yyyy-MM-dd') + '<br/>'
+ params[2].seriesName + ' : ' + new Date(params[2].value.getTime()+params[0].value).Format('yyyy-MM-dd') + '<br/>'
+ params[1].seriesName + ' : ' + new Date(params[1].value).Format('yyyy-MM-dd') + '<br/>'
+ params[3].seriesName + ' : ' + new Date(params[3].value.getTime()+params[1].value).Format('yyyy-MM-dd');
}
},
legend : {
data : ['要求完成时间','实际完成时间']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
yAxis : [
{
type : 'category',
data : ['配置确认','供方资源可用','招标申请','招标定标','代码申请','代码发放','采购计划下达','采购合同下达','首次承诺到货时间']
}
],
xAxis : [
{
type : 'time',
min:new Date("2015/08/24"),
max:new Date("2015/10/30")
}
],
series : [
{
name:'要求开始时间',
type:'bar',
stack: 'jh',
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:[new Date().setFullYear(2015,7,25),new Date().setFullYear(2015,7,25),new Date().setFullYear(2015,8,22),new Date().setFullYear(2015,8,25),new Date().setFullYear(2015,9,5),new Date().setFullYear(2015,9,7),new Date().setFullYear(2015,9,9),new Date().setFullYear(2015,9,12),new Date().setFullYear(2015,9,17)]
},
{
name:'实际开始时间',
type:'bar',
stack: 'sj',
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:[new Date().setFullYear(2015,7,25),
new Date().setFullYear(2015,7,25),
new Date().setFullYear(2015,9,7),
new Date().setFullYear(2015,9,10),
new Date().setFullYear(2015,9,12),
new Date().setFullYear(2015,9,14),
new Date().setFullYear(2015,9,16),
new Date().setFullYear(2015,9,19),
new Date().setFullYear(2015,9,24)
]
},
{
name:'要求完成时间',
type:'bar',
stack: 'jh',
data:[new Date(15*88400000),
new Date(27*88400000),
new Date(3*88400000),
new Date(10*88400000),
new Date(2*88400000),
new Date(2*88400000),
new Date(3*88400000),
new Date(5*88400000),
new Date(3*88400000)
]
//data:[new Date("2015/09/09"),new Date("2015/09/22"),new Date("2015/09/25"),new Date("2015/10/05"),new Date("2015/10/07"),new Date("2015/10/09"),new Date("2015/10/12"),new Date("2015/10/17"),new Date("2015/10/20")]
},
{
name:'实际完成时间',
type:'bar',
stack: 'sj',
data:[new Date(15*88400000),
new Date(43*88400000),
new Date(3*88400000),
new Date(2*88400000),
new Date(2*88400000),
new Date(2*88400000),
new Date(3*88400000),
new Date(5*88400000),
new Date(3*88400000)
]
//data:[new Date("2015/09/09"),new Date("2015/09/22"),new Date("2015/09/25"),new Date("2015/10/05"),new Date("2015/10/07"),new Date("2015/10/09"),new Date("2015/10/12"),new Date("2015/10/17"),new Date("2015/10/20")]
}
]
};
/*option = {
title : {
text : '时间坐标折线图',
subtext : 'dataZoom支持'
},
tooltip : {
trigger: 'item',
formatter : function (params) {
var date = new Date(params.value[0]);
data = date.getFullYear() + '-'
+ (date.getMonth() + 1) + '-'
+ date.getDate() + ' '
+ date.getHours() + ':'
+ date.getMinutes();
return data + '<br/>'
+ params.value[1] + ', '
+ params.value[2];
}
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom: {
show: true,
start : 0
},
legend : {
data : ['series1']
},
grid: {
y2: 80
},
xAxis : [
{
type : 'time',
splitNumber:10
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: 'series1',
type: 'line',
showAllSymbol: true,
symbolSize: function (value){
return Math.round(value[2]/10) + 2;
},
data: (function () {
var d = [];
var len = 0;
var now = new Date();
var value;
while (len++ < 1) {
d.push([
new Date(2000, 9, 1, 0, len * 10000),
(Math.random()*30).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
]);
}
return d;
})()
}
]
};*/
// 为echarts对象加载数据
myChart.setOption(option);
</script>
附日期间隔天数代码（月-1）<br />
<input type="text" id="d1" />
<input type="text" id="d2" />
<input type="button" value="=" onclick="getDays()" />
<input type="text" id="d3" />
<script type="text/javascript">
function getDays(){
var arrDate, objDate1, objDate2, intDays;
objDate1 = new Date();
objDate2 = new Date();
arrDate = document.getElementById("d1").value.split("-");
objDate1.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
arrDate = document.getElementById("d2").value.split("-");
objDate2.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
intDays = parseInt(Math.abs(objDate1 - objDate2) / 1000 / 60 / 60 / 24);
document.getElementById("d3").value=intDays ;
}
</script>
</body>
