echarts实现甘特图

最新推荐文章于 2024-08-15 11:02:12 发布

Raya_L

最新推荐文章于 2024-08-15 11:02:12 发布

阅读量8.4k

点赞数 1

分类专栏： Echarts

本文链接：https://blog.csdn.net/XCL18215166914/article/details/83055061

版权

本文介绍了如何利用ECharts库来创建甘特图。通过引用特定的ECharts甘特图JS文件，结合Java代码，可以成功生成甘特图。详细步骤包括引入资源和展示生成结果。

摘要由CSDN通过智能技术生成

用echarts生成甘特图

参考：http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl

1.首先加入echarts中甘特图js

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Teamwork</title>
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />


</head>
<body >
<div class="layui-col-md6">
    <div id="container" style="height: 700px;width: 100%" ></div>
</div>
<script type="text/javascript" src="${base}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/echarts/echarts.gantt.js"></script>
<script>
    var symbolSize = 20;
    var myCharts = echarts.init(document.getElementById('container'));
    var option = {
        legend: {
            y: 'bottom',
            data: ['计划时间']  //修改的地方1

        },
        grid: {
            containLabel: true,
            left: 20
        },
        xAxis: {
            type: 'time',
             axisLabel: {
                 formatter: function(params) {
                     var date = new Date();
                     date.setTime(params);
                     return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
                 }
             }
        },

        yAxis: {
            data:{}