echarts 甘特图 demo
2017-12-07 本文已影响2050人
北方蜘蛛
回溯项目还可以，不完善还没有进度百分比先保存着
其他平台的一些demo
https://code.hcharts.cn/hcharts.cn/tp40io/share/pure
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
<title>project</title>
</head>
<body>
<div id="main" style="width:100%;height:400px;"></div>
<script>
// 绘制图表。
var opt = {
title: {
text: '工作流甘特图'
},
legend: {
data: ['计划完成时间', '实际完成时间']
},
xAxis: {
type: 'time',
position: "top"
},
yAxis: {
type: "category",
data: ['测试', '开发', '设计', '总进度']
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>"
var date0 = params[0].data;
var date1 = params[1].data;
var date2 = params[2].data;
date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
res += params[0].seriesName + ":" + date0 + "</br>"
res += params[1].seriesName + ":" + date1 + "</br>"
res += params[2].seriesName + ":" + date2 + "</br>"
console.log(params[0]);
return res;
}
},
series: [
{
name: '计划开始时间',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2017/09/23"),
new Date("2017/09/10"),
new Date("2017/09/1"),
new Date("2017/09/1"),
]
},
{
name: '计划完成时间',
type: 'bar',
stack: '总量',
data: [
new Date("2017/09/31"),
new Date("2017/09/20"),
new Date("2017/09/15"),
new Date("2017/09/30"),
]
}, {
name: '实际完成时间',
type: 'bar',
stack: '总量',
data: [
new Date("2017/09/30"),
new Date("2017/09/23"),
new Date("2017/09/14"),
new Date("2017/09/30"),
]
}
]
};
echarts.init(document.getElementById('main')).setOption(opt);
</script>
</body>
</html>
效果图如下
image.png
