ECharts甘特图\条状图实现

最新推荐文章于 2025-10-29 10:53:21 发布

原创

最新推荐文章于 2025-10-29 10:53:21 发布 · 5.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#ECharts #甘特图

本文介绍了如何使用ECharts在移动端创建适合显示的简化甘特图。提供了一个示例代码，可以在ECharts官方示例网站上直接运行和修改。

由于需要在移动端显示甘特图，但是原本的PC端密集的甘特图不适合移植，因此决定采用ECharts做一个简化版的。
以下仅提供一个甘特图示例，可以直接拷贝到http://www.echartsjs.com/examples/中运行修改。

效果图：

效果图

代码：

       Date.prototype.Format = function (fmt) {
   
   
            let o = {
   
   
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (let k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]