<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="xpm" uri="http://www.xinhuagroup.com/xpm" %>
<%@ page isELIgnored="false" %>
<div class="easyui-layout" data-options="fit:true,border:true">
<div data-options="region:'center',border:false">
<div id="barChart" style="width:'100%';height: 500px;"></div>
</div>
</div>
<script src="sta/js/echarts-2.2.7/build/dist/echarts.min.js"></script>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById('barChart'));
var option = {
title: {
text: '项目实施进度表',
x: "center", //标题水平方向位置
top: '20'
},
legend: {
y: 'bottom',
data: ['计划时间', '实际时间']
},
grid: {
containLabel: true,
left: '30'
},
xAxis : [{
type : 'time',
axisLabel : {
formatter: function(value){
return new Date(value).format('yyyy-MM-dd');
}
}
}],
yAxis: {
data: ['设计', '采购', '制造', '质检']
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>"
params[0].data = (params[0].data == 'NaN-aN-aN') ? '待定' : params[0].data;
params[1].data = (params[1].data == 'NaN-aN-aN') ? '待定' : params[1].data;
params[2].data = (params[2].data == 'NaN-aN-aN') ? '待定' : params[2].data;
params[3].data = (params[3].data == 'NaN-aN-aN') ? '待定' : params[3].data;
res += params[0].seriesName + "~" + "计划完成时间" + ":</br>" + params[0].data + "~" + params[1].data + "</br>"
res += params[2].seriesName + "~" + "实际完成时间" + ":</br>" + params[2].data + "~" + params[3].data
return res;
}
},
series: [{
name: '计划开始时间',
type: 'bar',
stack: 'test1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
]},
{
name: '计划时间',
type: 'bar',
stack: 'test1',
itemStyle: {
normal: {
color: '#F98563'
}
},
data: [
new Date('${exeInfo.planTimeEc}').format('yyyy-MM-dd'),
new Date('${exeInfo.planTimePc}').format('yyyy-MM-dd'),
new Date('${exeInfo.planTimeMc}').format('yyyy-MM-dd'),
new Date('${exeInfo.planTimeTest}').format('yyyy-MM-dd')
]
},
{
name: '实际开始时间',
type: 'bar',
stack: 'test2',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
]
},
{
name: '实际时间',
type: 'bar',
stack: 'test2',
itemStyle: {
normal: {
color: '#A2E068'
}
},
data: [
new Date('${exeInfo.factEndTimeEc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factEndTimePc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factEndTimeMc}').format('yyyy-MM-dd'),
new Date('${exeInfo.factEndTimeTest}').format('yyyy-MM-dd')
]
}
]
};
myCharts.setOption(option);
</script>
Echarts 甘特图
最新推荐文章于 2024-09-10 23:26:16 发布