Echarts 甘特圖教程

時間 2019-11-19

標籤 echarts 教程简体版

原文原文鏈接

Echarts甘特圖教程javascript

echarts官網實例：html

https://gallery.echartsjs.com/editor.html?c=xEYpsVs30sjava

效果：jquery

代碼：json

<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

不一樣版本可能不兼容ide

這裏面的方法能夠作一個參考，在本身所需的echarts版本下開發spa

結束設計

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。