echarts绘制甘特图
在setoption之后添加这段代码：
window.addEventListener('resize', function () {
myChart.resize();
});
图表就能随着窗口大小，自动适应，且支持一页多图。
效果图：
html代码：
特别注意点：
xAxis : [
{
type : 'value',
splitNumber: legend.length-1,
max: legend.length-1,...
此处的splitNumber 和 max决定了x轴的分栏线是否重合（因为有上下两组数据，可能会出现分栏线不一致情况）
<! DOCTYPE html>
<html>
<head>
<title>报表</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<div id="charts_div" style="height: 550px;"></div>
<pre style="margin: -15px 0px 0px 20px;font-size: 14px;">
图例：<span style="display: inline-block;width: 20px;height: 10px; "></span>计划时长 <span style="display: inline-block;width: 20px;height: 10px; "></span>已完成阶段的实际时长 <span style="display: inline-block;width: 20px;height: 10px; "></span>未完成阶段的实际时长
</pre>
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dist/echarts.js"></script>
<script language="javascript">
require.config({
paths: {
echarts: 'dist'
}
});
function dateAfter(dateStr,num){
var date1 = new Date(Date.parse(dateStr.replace(/-/g, "/")));
//alert(date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate());
var date2 = new Date(date1);
date2.setDate(date1.getDate()+num);
var times = date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
return times;
}
function GetDateDiff(startDate,endDate){
var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
var dates = (startTime - endTime)/(1000*60*60*24);
return dates;
}
//var url = "${path}/notice/groupFirstCheckNotice!initGantt.action?projectId=${resultjson.projectId}";
var totalCategory = 0,category=[],planData=[],planBase=[],actualData=[],actualBase=[],legend=[];
var globalmin = null;
var json = {
"currStageIndexList": [
8,
9
],
"currStageList": [
"初步验收",
"试运行"
],
"stageList": [
{
"planBeginDate": "2016-08-31",
"name": "设计审查",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2016-10-05"
},
{
"planBeginDate": "2016-10-05",
"name": "设计批复",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2016-10-12"
},
{
"planBeginDate": "2016-10-12",
"name": "工程交接",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2016-10-26"
},
{
"planBeginDate": "2016-10-26",
"name": "设备到货验收",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2016-11-25"
},
{
"planBeginDate": "2016-11-25",
"name": "开工启动",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2016-12-25"
},
{
"planBeginDate": "2016-12-25",
"name": "设备安装",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2017-01-01"
},
{
"planBeginDate": "2017-01-01",
"name": "系统调测",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2017-01-08"
},
{
"planBeginDate": "2017-01-08",
"name": "割接上线",
"endDate": "2016-04-22",
"beginDate": "2016-04-22",
"planEndDate": "2017-01-15"
},
{
"planBeginDate": "2017-01-15",
"name": "初步验收",
"endDate": "2017-04-17",
"beginDate": "2017-01-22",
"planEndDate": "2017-04-15"
},
{
"planBeginDate": "2017-04-15",
"name": "试运行",
"endDate": "2017-11-17",
"beginDate": "2017-05-12",
"planEndDate": "2017-10-12"
},
{
"planBeginDate": "2017-10-12",
"name": "竣工验收",
"endDate": "",
"beginDate": "",
"planEndDate": "2017-12-11"
}
],
"projectId": 8211
}
//$.getJSON(url,function(json){
$(function(){
if(json && json.stageList){
totalCategory = json.stageList.length;
var minPlan = null, minActual = null, max = null;
for(var i=(totalCategory-1);i>=0;i--){
var planStart = json.stageList[i].planBeginDate;
var actualStart = json.stageList[i].beginDate;
if(i==(json.stageList.length-1)){
var dateTT = new Date();
var dstr = dateTT.getFullYear()+"-"+(dateTT.getMonth()+1)+"-"+dateTT.getDate()
minPlan = planStart || dstr;
minActual = actualStart || dstr;
max = planStart;
}
if(GetDateDiff(max,json.stageList[i].planEndDate)<0){
max = json.stageList[i].planEndDate;
}
if(GetDateDiff(max,json.stageList[i].endDate)<0){
max = json.stageList[i].endDate;
}
if(GetDateDiff(minPlan,planStart)>0){
minPlan = planStart;
}
if(GetDateDiff(minActual,actualStart)>0){
minActual = actualStart;
}
}
var min = null;
if(GetDateDiff(minPlan,minActual)>=0){
min = minActual;
}else{
min = minPlan;
}
globalmin = min;
for(var i=(totalCategory-1);i>=0;i--){
var planStart = json.stageList[i].planBeginDate;
var planEnd = json.stageList[i].planEndDate;
var actualStart = json.stageList[i].beginDate;
var actualEnd = json.stageList[i].endDate;
category.push(json.stageList[i].name);
planBase.push(GetDateDiff(planStart,globalmin));
var pd = {};
pd.value = GetDateDiff(actualEnd,actualStart);
pd.color = '#FF0000';
var currentStage = json.currStageList;
var sName = json.stageList[i].name;
if(currentStage && $.inArray(sName, currentStage)>-1){
pd.color = '#FFFF00';
}
planData.push(GetDateDiff(planEnd,planStart));
actualBase.push(GetDateDiff(actualStart,globalmin));
actualData.push(pd);
}
for(var i=0;i<GetDateDiff(max,min);i++){
var dt = dateAfter(min,i);
legend.push(dt);
}
init();
}
});
function init(){
require(
[
'echarts',
'echarts/chart/bar'
],
//自建项目饼状图设置
function (ec) {
var myChart = ec.init(document.getElementById('charts_div'));
var option = {
title: {
text: '',
subtext: ''
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar0 = params[0];
var tar1 = params[1];
var tar2 = params[2]
var tar3 = params[3];
var result = tar2.seriesName + ' : ' + dateAfter(globalmin,tar2.value-0) + '<br/>' +
tar3.seriesName + ' : ' + dateAfter(globalmin,tar2.value+tar3.value)+ '<br/>' +
tar0.seriesName + ' : ' + dateAfter(globalmin,tar0.value-0) + '<br/>' +
tar1.seriesName + ' : ' + dateAfter(globalmin,tar0.value+tar1.value);
return result;
}
},
xAxis : [
{
type : 'value',
splitNumber: legend.length-1,
max: legend.length-1,
axisLabel:{
show: false
},
splitLine:{
show: false
}
},
{
type : 'category',
boundaryGap : false,
data : legend
}
],
yAxis : [
{
type : 'category',
splitLine: {show:false},
data : category
}
],
series : [
{
name:'实际开始时间',
type:'bar',
stack: '总量1',
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:actualBase
},
{
name:'实际完成时间',
type:'bar',
stack: '总量1',
itemStyle : { normal: {
color:function(params) {
//alert(JSON.stringify(params));
return params.data.color;
},label : {show: true, position: 'inside'}}},
data:actualData
},
{
name:'计划开始时间',
type:'bar',
stack: '总量',
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:planBase
},
{
name:'计划完成时间',
type:'bar',
stack: '总量',
itemStyle : {
normal: {
color:'#00AA55',
label : {
show: true,
position: 'inside'
}
}
},
data:planData
}
]
};
myChart.setOption(option);
}
);
}
</script>
</html>
echarts绘制甘特图的更多相关文章
- 使用Excel 2007绘制甘特图
本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...
- Python使用Plotly绘图工具，绘制甘特图
今天来讲一下如何使用Python 的绘图工具Plotly来绘制甘特图的方法 甘特图大家应该了解熟悉,就是通过条形来显示项目的进度.时间安排等相关情况的. 我们今天来学习一下,如何使用ployly来绘制 ...
- 如何使用Excel绘制甘特图
摘自:http://www.mifengtd.cn/articles/how-to-create-a-gantt-chart-in-excel.html 再造<优秀的时间管理和项目管理工具> ...
- 基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
- python的matplotlib.pyplot绘制甘特图
博主本来就想简单地找一下代码,画一幅甘特图,结果百度之后发现甘特图的代码基本都不是用matplotlib库,但是像柱状图等统计图通常都是用这个库进行绘制的,所以博主就花了一些时间,自己敲了一份代码,简 ...
- 第二阶段：1.流程图：9.excel绘制甘特图
后面的框都是日期 可以以一个月为周期计算或者周或者... 因为产品经理应该严格把控产品的时间 因此甘特图特别有必要 注意:任务拆解的越细 把控度越强 然后对格式进行设置 注意时间下面可以用颜色填充来表 ...
- 前端 | 使用 ECharts 绘制关系图
0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...
- ECharts绘制折线图
首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...
- qt绘制甘特图
重写paintEvent事件,代码如下 void xx::paintEvent(QPaintEvent *event){ QPainter painter(this); //绘制x,y轴,_maxWi ...
随机推荐
- 在VPS上搭建SS访问火星
前段时间发布了Visual Studio 2017 RC,由于现在VS没有离线的ISO了,只有一个在线安装文件.虽然可以通过这个在线安装文件生成完整的离线安装包(之前的ISO版本在安装过程中仍然需要联 ...
- FireDac 的RecordCount 相关测试 记录。
unit Unit4; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
- Android Studio中清单文件改versionCode和versionName没效果的原因
在Android Studio中,项目的versionCode 和versionName 的控制不是在AndroidManifest.xml清单文件中更改的,而是在项目的build.gradle中更改 ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- 基本TCP套接字编程
1.listen函数 将主动套接字转换成一个被动套接字 backlog指定相应套接字连接队列的大小. 监听套接字有2个队列: (1)未完成连接队列,接收客户SYN,发出SYN.ACK,等待完成三次握手 ...
- Net分布式系统之五：C#使用Redis集群缓存
本文介绍系统缓存组件,采用NOSQL之Redis作为系统缓存层. 一.背景 系统考虑到高并发的使用场景.对于并发提交场景,通过上一章节介绍的RabbitMQ组件解决.对于系统高并发查询,为了提供性能减 ...
- c#FileStream文件读写(转)
FileStream对象表示在磁盘或网络路径上指向文件的流.这个类提供了在文件中读写字节的方法,但经常使用StreamReader或StreamWriter执行这些功能.这是因为FileStream类 ...
- 阿里巴巴Java招聘
大家好: 我是阿里巴巴B2B的应用架构师,现在大量招聘Java工程师,对自己技术有信心的兄弟姐妹,请联系我吧. 版权声明:本文为博主原创文章,未经博主允许不得转载.
- C#使用ESC指令控制POS打印机打印小票
1.前言 C#打印小票可以与普通打印机一样,调用PrintDocument实现.也可以发送标注你的ESC指令实现.由于 调用PrintDocument类时,无法操作使用串口或TCP/IP接口连接的po ...
- C语言学习笔记（二）_system系统调用及posix说明
1.9 System系统调用 System库函数的功能是执行操作系统的命令或者运行指定的程序.system库函数的调用需要#include<stdlib.h>这个头文件. #include ...