使用Echarts画甘特图
2274 2023年04月04日 前端Echarts是一个非常强大的图表库, 下面我们来使用它来画甘特图,
首先需要下载Echarts。
下载地址:http://echarts.baidu.com/download.html
实现代码
<xmp>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '项目进度'
},
legend: {
data: ['项目进度']
},
xAxis: {
type: 'time'
},
yAxis: {
data: ['测试实际', '测试计划', '程序实际', '程序计划', 'UI实际', 'UI计划', '策划实际', '策划计划',]
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function (params) {
var res = params[0].name + ""
var date0 = params[0].data;
var date1 = params[1].data;
date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
res += params[0].seriesName + ":" + date0 + ""
res += params[1].seriesName + ":" + date1 + ""
return res;
}
},
grid: {
left: '20%',
right: '10%'
},
series: [
{
name: '开始时间',
type: 'bar',
stack: '总量',
barWidth: '60%',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2016/03/28"),
new Date("2016/04/01"),
new Date("2016/03/21"),
new Date("2016/03/01"),
new Date("2016/02/15"),
new Date("2016/02/01"),
new Date("2016/01/09"),
new Date("2016/01/01"),
]
}, {
name: '结束时间',
type: 'bar',
stack: '总量',
barWidth: '60%',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#9e9e9e', '#259d24', '#9e9e9e', '#259d24', '#9e9e9e', '#259d24', '#9e9e9e', '#259d24'
];
//设置对应颜色
return colorList[params.dataIndex]
},
barBorderRadius: 0,
shadowColor: 'rgba(0, 0, 0, 0)',
shadowBlur: 0 //图形阴影的模糊大小。
}
},
data: [
new Date("2016/6/20"),
new Date("2016/5/30"),
new Date("2016/6/12"),
new Date("2016/5/30"),
new Date("2016/4/25"),
new Date("2016/3/30"),
new Date("2016/3/29"),
new Date("2016/3/30")
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</xmp>
-
使用Echarts画甘特图
Echarts是一个非常强大的图表库, 下面我们来使用它来画甘特图,
-
go语言怎么连接mysql,并实现增删改查
要使用Go语言连接MySQL,需要使用第三方库。常用的库包括: 这里以go-sql-driver/mysql为 […]
-
beego实现模块化开发
Beego 框架可以通过模块化开发来提高项目的可维护性和可扩展性,可以将一个大型的应用划分为多个模块,每个模块独立维护,有自己的控制器、视图和模型等。
-
Beego实现JWT
Beego是一个基于Go语言的Web框架,实现JWT认证可以通过beego的中间件机制来实现,下面是一个简单的 […]
-
使用Axios+PHP+JWT实现登录认证
JWT(JSON Web Token),顾名思义就是可以在Web上传输的token,这种token是用JSON格式进行format的。它是一个开源标准(RFC7519),定义了一个紧凑的自包含的方式在不同实体之间安全的用JSON格式传输信息。
-
PHP解决雪花算法ID在前端精度丢失的问题
雪花算法(Snowflake)是一种用于生成全局唯一ID的算法,其基本思路是结合时间戳、机器ID、租约ID和序列号生成一个64位的数据,从而保证ID的唯一性。 雪花算法的生成过程如下:
-
虚拟滚动实现页面百万数据滚动
1.概念 虚拟滚动是一种优化长列表性能的技术,它通过按需渲染的方式,只渲染可见部分的列表项,而不是渲染整个列表 […]
-
go实现MD5
在这个示例中,我们使用了Go标准库中的crypto/md5包来计算一个字符串的MD5值。首先,我们将字符串转换 […]
-
Linux服务器Rsync结合inotify同步文件
一、实现效果 服务器A:192.168.161.150 (分布服务器)(rsync客户端+inotify) 服务器B:192.168.161.151 (WEB服务器1)(rsync服务端) 服务器C:192.168.161.152 (WEB服务器2)(rsync服务端) 说明:服务器A有文件更新,自动同步到服务器B和C
-
JavaScript实现滑动验证码
滑动验证码(也叫做滑动拼图验证码)是一种用户交互形式的验证码,通常用于网页或移动应用的登录、注册或敏感操作。其 […]