echarts按開始日期和結束時間作報表
作這個報表以前首先要了解時間是怎麼累加的，假如說個人開始是2015-8-25，15天完成，後面的時間給2015-9-9是不對的，echarts的的值是累加的，作這個需求的時候由於時間累加的問題耽誤了一成天。不過我在作顯示日期的時候發現他是一串數字，由此聯想到日期實際上是一串數字。查了一下資料，原來是1970-1-1後累加的毫秒數。
javascript
| 任務 | 要求開始 | 消耗天數 | 要求完成 | 實際開始 | 實際完成 |
| 配置確認 | 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>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>java
附日期間隔天數代碼（月-1）<br />echarts
<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>
dom
</body>this
相關文章
- 1. 報表模板FineReport時間段報表之開始時間、結束時間
- 2. element 日期控件 限制開始日期和結束日期
- 3. Excel 中連續生成開始日期和結束日期之間的日期
- 4. Echarts+Java實現根據開始時間和結束時間按周或者按月查詢
- 5. 根據開始日期和結束日期返回各類時間數據，附帶該類型的開始日期結束日期
- 6. elementui 中 日期時間插件 結束時間大於開始時間 且開始時間是今天之後
- 7. iview表單校驗 結束日期晚於開始日期
- 8. iView中DatePicker設置開始時間和結束時間約束
- 9. iview DatePicke開始時間和結束時間約束
- 10. 開始時間結束時間對比
- 更多相關文章...
- • SQLite 日期 & 時間 - SQLite教程
- • XSD 日期和時間數據類型 - XML Schema 教程
- • PHP開發工具
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 報表模板FineReport時間段報表之開始時間、結束時間
- 2. element 日期控件 限制開始日期和結束日期
- 3. Excel 中連續生成開始日期和結束日期之間的日期
- 4. Echarts+Java實現根據開始時間和結束時間按周或者按月查詢
- 5. 根據開始日期和結束日期返回各類時間數據，附帶該類型的開始日期結束日期
- 6. elementui 中 日期時間插件 結束時間大於開始時間 且開始時間是今天之後
- 7. iview表單校驗 結束日期晚於開始日期
- 8. iView中DatePicker設置開始時間和結束時間約束
- 9. iview DatePicke開始時間和結束時間約束
- 10. 開始時間結束時間對比