使用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>
评论

0 条评论
OBJUI公众号
热门文章
  • 使用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实现滑动验证码

    滑动验证码(也叫做滑动拼图验证码)是一种用户交互形式的验证码,通常用于网页或移动应用的登录、注册或敏感操作。其 […]