Echarts 甘特图教程
Echarts甘特图教程
echarts官网实例：
https://gallery.echartsjs.com/editor.html?c=xEYpsVs30s
效果：
代码：
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<div id="container" style="height:900px;"></div>
<script>
var myCharts = echarts.init(document.getElementById('container'));
var option = {
backgroundColor: "#fff",
title: {
text: "项目甘特图",
padding: 20,
textStyle: {
fontSize: 17,
fontWeight: "bolder",
color: "#333"
},
subtextStyle: {
fontSize: 13,
fontWeight: "bolder"
}
},
legend: {
data: ["计划工期", "可行性研究阶段", "初步设计阶段", "施工图设计阶段", "项目实施阶段", "项目验收阶段"],
align: "right",
right: 80,
top: 50
},
grid: {
containLabel: true,
show: false,
right: 130,
left: 40,
bottom: 40,
top: 90
},
xAxis: {
type: "time",
axisLabel: {
"show": true,
"interval": 0
}
},
dataZoom: [{
type: 'inside',
}, {
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
yAxis: {
axisLabel: {
show: true,
interval: 0,
formatter: function(value, index) {
var last = ""
var max = 5;
var len = value.length;
var hang = Math.ceil(len / max);
if (hang > 1) {
for (var i = 0; i < hang; i++) {
var start = i * max;
var end = start + max;
var temp = value.substring(start, end) + "\n";
last += temp; //拼接最终的字符串
}
return last;
} else {
return value;
}
}
},
data: ["阶段一", "标段二", "标段三"]
},
tooltip: {
trigger: "axis",
formatter: function(params) {
var res = "";
var name = "";
var start0 = "";
var start = "";
var end0 = "";
var end = "";
for (var i in params) {
var k = i % 2;
if (!k) { //奇数
name = params[i].seriesName;
end0 = params[i].data;
end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
}
if (k) { //偶数
start0 = params[i].data;
start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
res += name + " : " + start + "~" + end + "</br>";
}
}
return res;
}
},
series: [{
name: "计划工期",
type: "bar",
stack: "总量0",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "skyblue",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-05-01"), new Date("2018-03-14"), new Date("2018-05-01")]
},
{
name: "计划工期",
type: "bar",
stack: "总量0",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-01-01"), new Date("2018-01-01"), new Date("2018-03-15")]
},
{
name: "可行性研究阶段",
type: "bar",
stack: "总量2",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "green",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-01-10"), new Date("2018-01-10"), new Date("2018-03-30")]
},
{
name: "可行性研究阶段",
type: "bar",
stack: "总量2",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-01-02"), new Date("2018-01-02"), new Date("2018-03-16")]
},
{
name: "初步设计阶段",
type: "bar",
stack: "总量3",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "red",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-02-20"), new Date("2018-01-20"), new Date("2018-04-10")]
},
{
name: "初步设计阶段",
type: "bar",
stack: "总量3",
itemStyle: {
normal: {
color: "white"
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-02-01"), new Date("2018-01-12"), new Date("2018-04-01")]
},
{
name: "施工图设计阶段",
type: "bar",
stack: "总量4",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "brown",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-03-09"), new Date("2018-01-25"), new Date("2018-04-20")]
},
{
name: "施工图设计阶段",
type: "bar",
stack: "总量4",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-02-25"), new Date("2018-01-21"), new Date("2018-04-11")]
},
{
name: "项目实施阶段",
type: "bar",
stack: "总量5",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "yellow",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-03-12"), new Date("2018-02-15"), new Date("2018-04-30")]
},
{
name: "项目实施阶段",
type: "bar",
stack: "总量5",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-03-10"), new Date("2018-01-26"), new Date("2018-04-21")]
},
{
name: "项目验收阶段",
type: "bar",
stack: "总量6",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: 'orange',
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [new Date("2018-03-30"), new Date("2018-03-13"), new Date("2018-05-01")]
},
{
name: "项目验收阶段",
type: "bar",
stack: "总量6",
itemStyle: {
normal: {
color: 'white',
}
},
zlevel: -1,
z: 3,
data: [new Date("2018-03-15"), new Date("2018-02-16"), new Date("2018-04-30")]
},
]
}
myCharts.setOption(option);
</script>
</body>
</html>
使用说明：
//1.title.text修改为自己的
//2.legend.data修改为自己的阶段名称数组
//3.yAxis.data修改为自己的项目名称数组
//4.series数组内一共拥有对象数是你阶段名称数组里的两倍
// 其中一个阶段对应两个，即一个开始时间的json对象，一个结束时间的json对象；开始在前，结束在，且与上面自己设置的阶段名称排序相同
// 两个的stack需为一样，这样两个柱状图才会重叠
Echarts为4.4.0版本
不同版本可能不兼容
这里面的方法可以做一个参考，在自己所需的echarts版本下开发
结束
Echarts 甘特图教程的更多相关文章
- 关于ECharts甘特图的实现
对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解 此处只分享甘特图的option,代码如下: option: { title: { text: '项目实施进度表', left: ...
- 基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
- vue项目使用Echarts制作项目工期甘特图
目录 1,前言 2,布局和数据部分 3,制作甘特图 1,前言 项目迭代过程中,碰上一个需求,要求用甘特图的方式显示项目的工期进度,开完会我赶紧搜索一下甘特图是啥东东,大概了解之后,做出了如下样式 Ec ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- SNF快速开发平台WinForm-CS甘特图
我们在做项目当中会经常用到按时间进度查看任务,其通过条状图来显示项目,进度,和其他时间相关的系统进展的内在关系随着时间进展的情况. 甘特图包含以下三个含义: 1.以图形或表格的形式显示活动: 2.通用 ...
- Twproject Gantt开源甘特图功能扩展
1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...
- 从零开始编写自己的C#框架（10）——项目实施计划与甘特图
不知不觉本系列已经写了一个月,编码前的各项工作到此也终于结束了.回头看看这一个月走过来,白天上班晚上码字查资料,写写改改,挺不容易的.很多时候有些知识会用,知道是怎么回事,但并不等于能写出来.错别字. ...
- java实现甘特图的2种方法:SwiftGantt和Jfree （转）
http://blog.sina.com.cn/s/blog_50a7c4a601009817.html 第一种方法使用SwiftGantt实现甘特图(进度图推荐这个) import java.a ...
- 使用Excel 2007绘制甘特图
本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...
随机推荐
- linux0.11内核源码——用户级线程及内核级线程
参考资料:哈工大操作系统mooc 用户级线程 1.每个进程执行时会有一套自己的内存映射表,即我们所谓的资源,当执行多进程时切换要切换这套内存映射表,即所谓的资源切换 2.但是如果在这个进程中创建线程, ...
- VMware安装MAC OS
测试环境 安装环境:win10 .VMware Workstation Pro14 镜像:OS X 10.11.5(由于太大,就没有上传网盘,网上也有很多资源) 安装准备 安装前先把关于VMware的 ...
- bzoj 4161 Shlw loves matrixI——常系数线性齐次递推
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4161 还是不能理解矩阵…… 关于不用矩阵理解的方法:https://blog.csdn.ne ...
- 累加器A与ACC区别
累加器写成A或ACC在51汇编语言指令中是有区别的. ACC在汇编后的机器码必有一个字节的操作数,即累加器的字节地址E0H,A在汇编后则隐含在指令操作码中.所以在指令中A不能用ACC来替代,而对A的特 ...
- jmeter 测试结果分析术语
label:定义http请求名称. samples:测试中一共发出的请求. average:平均响应时长.默认是单个request的平均响应时长. median:中位数,50%用户的响应时长. 90% ...
- 用 Flask 来写个轻博客 (22) — 实现博客文章的添加和编辑页面
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 新建表单 新建视图函数 新建模板 在博客文章页面添加 New 和 Ed ...
- laravel框架基础知识总结
一.laravel简介 laravel是一套优雅简介的PHP开发框架,受欢迎程度非常之高,功能强大,工具齐全:以下是本人在学习过程中记录的laravel比较基础的资料,权当学习笔记,请大神们多多指教 ...
- cabal替代脚本
由于网络原因,直接使用cabal update不成功,只能自己写脚本直接从网上拖包下来,自己安装. 但是这样做的缺点是需要手动处理dependency,当然,也可以把脚本写的复杂些,自动来处理depe ...
- hbase之RPC详解
Hbase的RPC主要由HBaseRPC.RpcEngine.HBaseClient.HBaseServer.VersionedProtocol 5个概念组成. 1.HBaseRPC是hbase RP ...
- 将本地图片数据制作成内存对象数据集|tensorflow|手写数字制作成内存对象数据集|tf队列|线程
样本说明: tensorflow经典实例之手写数字识别.MNIST数据集. 数据集dir名称 每个文件夹代表一个标签label,每个label中有820个手写数字的图片 标签label为0的文件夹 ...