精华内容
下载资源
问答
  • echarts实现甘特图

    万次阅读 热门讨论 2018-09-20 13:07:13
    参考文档:...实现效果: 1、引入js文件: <script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script> <script type="text/javascrip...

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

    实现效果:

    1、引入js文件:

    <script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script>
    <script type="text/javascript" src="echarts存放/echarts.min.js"></script>

    2、存放甘特图的容器

    <div id="container"></div><!--其他样式自行加上即可-->

     3、实现甘特图的js

    var myCharts = echarts.init(document.getElementById('container'));
    var option = {
        title: {
            text: '项目实施进度表',
            left: 10
        },
        legend: {
            y: 'bottom',
            data: ['计划时间', '实际时间']  //修改的地方1
    
        },
        grid: {
            containLabel: true,
            left: 20
        },
        xAxis: {
            type: 'time'
        },
    
        yAxis: {
    
            data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
    
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var res = params[0].name + "</br>"
                var date0 = params[0].data;
                var date1 = params[1].data;
                var date2 = params[2].data;
                var date3 = params[3].data;
                date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
                date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
                date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
                date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
                res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
                res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
                console.log(params[0]);
                return res;
            }
        },
        series: [
    
            {
                name: '计划开始时间',
                type: 'bar',
                stack: 'test1',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [
                    new Date("2015/09/2"),
                    new Date("2015/09/15"),
                    new Date("2015/09/15"),
                    new Date("2015/10/03"),
                    new Date("2015/10/04"),
                    new Date("2015/10/05"),
                    new Date("2015/10/06")
                ]
            },
            {
                name: '计划时间',
                type: 'bar',
                stack: 'test1',
                //修改地方2
                itemStyle: {
                    normal: {
                        color: '#F98563'
                    }
                },
                data: [
                    new Date("2015/09/12"),
                    new Date("2015/09/20"),
                    new Date("2015/09/25"),
                    new Date("2015/10/05"),
                    new Date("2015/10/07"),
                    new Date("2015/10/09"),
                    new Date("2015/10/12")
                ]
            },
            {
                name: '实际开始时间',
                type: 'bar',
                stack: 'test2',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [
                    new Date("2015/09/2"),
                    new Date("2015/09/15"),
                    new Date("2015/09/15"),
                    new Date("2015/10/03"),
                    new Date("2015/10/04"),
                    new Date("2015/10/05"),
                    new Date("2015/10/06")
                ]
            },
            {
                name: '实际时间',
                type: 'bar',
                stack: 'test2',
                //修改地方3
                itemStyle: {
                    normal: {
                        color: '#A2E068'
                    }
                },
                data: [
                    new Date("2015/09/6"),
                    new Date("2015/09/20"),
                    new Date("2015/09/27"),
                    new Date("2015/10/11"),
                    new Date("2015/10/16"),
                    new Date("2015/10/18"),
                    new Date("2015/10/17")
                ]
            }
        ]
    };
    myCharts.setOption(option);

    注:包含图表的div#container一定要设置高宽,否则页面上没有图表。

    展开全文
  • Echarts实现甘特图

    2020-05-08 19:03:02
    一、项目需求如下所示: 此项目实现的功能点: 1、鼠标滑动可滚动滚动条 2、y轴label鼠标滑动可显示tooltip 3、y轴label过长换行显示

    一、项目需求如下所示:

    此项目实现的功能点:

    1、鼠标滑动可滚动滚动条

    2、y轴label鼠标滑动可显示tooltip

    3、y轴label过长换行显示

    项目代码链接:https://github.com/maiziwjp/GanttChartByEcharts

    展开全文
  • vue中echarts实现甘特图

    千次阅读 2018-12-24 19:55:10
    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改 效果如下: &lt;template&gt; &lt;div id="myChart" ref=&...

    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改

    效果如下:

    <template>
     <div id="myChart" ref="chart" ></div>
    </template>
    <script>
      export default {
      updated(){
          this.changeView();
        },
        methods: {
          drawLine () {
            // 基于准备好的dom,初始化echarts实例
            // var bar_dv = document.getElementById('bar_dv');
            var barDv = this.$refs.chart;
            if (barDv) {
              console.log('bar_dv不为空');
              let myChart = this.$echarts.init(barDv)
              // 基于准备好的dom,初始化echarts实例
              // let myChart = this.$echarts.init(document.getElementById('myChart'))
              // 绘制图表
              var option = {
                title: {
                  text: '阶梯瀑布图',
                  subtext: 'From ExcelHome',
                  sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                  },
                  formatter: function (params) {
                    var tar;
                    if (params[1].value != '-') {
                      tar = params[1];
                    }
                    else {
                      tar = params[0];
                    }
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                  }
                },
                legend: {
                  data: ['支出', '收入']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                yAxis: {
                  type: 'category',
                  splitLine: { show: false },
                  data: function () {
                    var list = [];
                    for (var i = 1; i <= 11; i++) {
                      list.push('11月' + i + '日');
                    }
                    return list;
                  }()
                },
                xAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                      normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                      },
                      emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                      }
                    },
                    data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
                  },
                  {
                    name: '收入',
                    type: 'bar',
                    stack: '总量',
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                  },
                  {
                    name: '支出',
                    type: 'bar',
                    stack: '总量',
                    label: {
                      normal: {
                        show: true,
                        position: 'bottom'
                      }
                    },
                    data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
                  }
                ]
              };
              myChart.setOption(option);
            } else {
              console.log('bar_dv为空!');
            }
          }
        }
      }
    </script>
    

     

    展开全文
  • 使用Echarts实现甘特图 主要实现功能是:展示车间调度过程中,工件排列 直接上代码: app.title = '堆叠条形图'; var ma = 4; var job = 10; var i = 0; var C1 = [15, 26, 75, 106]; var S1 = [0, 15, 26, 75]; ...

    使用Echarts实现甘特图

    主要实现功能是:展示车间调度过程中,工件排列

    直接上代码:

    app.title = '堆叠条形图';
    
    var ma = 4;
    var job = 10;
    var i = 0;
    var C1 = [15, 26, 75, 106];
    var S1 = [0, 15, 26, 75];
    option = {
        title: {
            text: '计划甘特图',
            left: '45%',
            top: '5%'
        },
        legend: {
            bottom: '10%',
            data: ['工件1', '工件2', '工件3', '工件4', '工件5', '工件6', '工件7', '工件8', '工件9', '工件10']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            maxInterval: 20,
            splitLine: {
                show: false
            }, //去除网格线
            name: '时间'
        },
        yAxis: {
            type: 'category',
            data: ['机器1', '机器2', '机器3', '机器4'],
            name: '机器编号'
        },
        series: [{
                name: '工件3开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [0, 15, 26, 75]
            }, {
                name: '工件3',
                type: 'bar',
                stack: '总量',
    
                data: [15, 11, 49, 31]
            }, {
                name: '工件9开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [2, 18, 8, 34]
            }, {
                name: '工件9',
                type: 'bar',
                stack: '总量',
    
                data: [27, 5, 57, 49]
            }, {
                name: '工件8开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [1, 34, 8, 9]
            }, {
                name: '工件8',
                type: 'bar',
                stack: '总量',
    
                data: [38, 60, 23, 59]
            }, {
                name: '工件6开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [1, 8, 50, 9]
            }, {
                name: '工件6',
                type: 'bar',
                stack: '总量',
    
                data: [36, 70, 45, 91]
            }, {
                name: '工件10开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [8, 5, 16, 9]
            }, {
                name: '工件10',
                type: 'bar',
                stack: '总量',
    
                data: [87, 56, 64, 85]
            }, {
                name: '工件5开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [5, 15, 7, 5]
            }, {
                name: '工件5',
                type: 'bar',
                stack: '总量',
    
                data: [77, 56, 89, 78]
            }, {
                name: '工件1开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [7, 5, 5, 1]
            }, {
                name: '工件1',
                type: 'bar',
                stack: '总量',
    
                data: [54, 79, 16, 66]
            }, {
                name: '工件4开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [7, 9, 82, 1]
            }, {
                name: '工件4',
                type: 'bar',
                stack: '总量',
    
                data: [71, 99, 15, 68]
            }, {
                name: '工件2开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [1, 3, 2, 5]
            }, {
                name: '工件2',
                type: 'bar',
                stack: '总量',
    
                data: [83, 3, 89, 58]
            }, {
                name: '工件7开始时刻',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
    
                data: [7, 29, 28, 6]
            }, {
                name: '工件7',
                type: 'bar',
                stack: '总量',
    
                data: [53, 99, 60, 13]
            }
       ]
    };
    

    最后的效果图:
    在这里插入图片描述

    展开全文
  • 1、引入js文件: <script type="text/javascript" src="jQuery存放路径/jquery.min.js">...2、存放甘特图的容器 <div id="container"></div><!--其他样式自行加上即可--> ...
  • 1.先看效果: 2.代码部分我只贴出来option部分,其余的都是一样的;也可参考官网地址: https://www.echartsjs.com/examples/zh/index.html#chart-type-bar ...
  • 需求:公司OA,要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图效果: 描述: 甘特图y轴是根据搜索条件(时间段和研发组)查询数据库,查询这段时间该 项目组研发的项目,x轴根据时间段生成...
  • echarts vue 甘特图实现

    2018-09-30 11:08:00
    厂家机型故障分析 ...--柱状为例 --> <script src="/static/js/component/dateType.js"></script> <script src="/static/js/component/chart-wrapper.js"></script> ...
  • 这里时间轴要实现的效果要基本如下所示 该时间轴并不是要实现选中单独的某一个月份并查看单月的数据,而是要将当前数据的时间跨度控制在时间轴的跨度之间,在点击后退一个月或前进一个月的时候,对应的图表数据...
  • ECharts甘特图\条状图实现

    千次阅读 2018-12-13 10:21:02
    以下仅提供一个甘特图示例,可以直接在http://www.echartsjs.com/examples/中运行修改。 效果图: 代码: Date.prototype.Format = function (fmt) { let o = { &amp;amp;quot;M+&amp;amp;quot;: this....
  • 使用 Echarts 实现项目进度甘特图

    万次阅读 2018-11-22 17:34:19
    Echarts 功能十分强大,可以实现多种图表效果,下面简单介绍下最近使用Eharts 实现的一个项目进度甘特图。 下面是实现的效果: 目录 一.概览 Echarts 基本内容 1.官网文档 2.查看示例 二.需求分析 1.数据...
  • 问题来了,由于echarts没有专门的甘特图,我们使用了堆积图展示数据,但是如果数据里出现2条以上相同开始时间和结束时间的数据时,就会出现依次向后堆积的情况,同时会印象X轴(时间轴)的显示,出现时间刻度错位的...
  • 对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解 ...此处只分享甘特图的option,代码如下: option: { title: { text: '项目实施进度表', left: 10 }, legend: { y: 'bottom', ...
  • 1.在开发一个后台系统时,遇到一个甘特图的需求 2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求 效果 < template > < div class = "hello" > < ! -- Echarts图表盒子 -- >...
  • ECharts画分类甘特图

    2020-06-04 10:25:29
    项目最近做任务排产,需要绘画甘特图,并且每两份一组,做了一个JQuery快速做了POC,实现了大部分功能,后来持续开发,做到了划定当前时间,任务多了后固定左侧列和顶部坐标轴行等等。 分享博客的话就简单的分享一下...
  • var myChart = echarts.init(document.getElementById(id)); var info = ['韩愈(768-824)', '柳宗元(773-819)', '欧阳修(1007-1072)', '苏洵(1009-1066)', '苏轼(1037-1101)', '苏辙(1039-1112)', '...
  • echarts + vue 实现项目进度不同颜色柱形甘特图

    千次阅读 热门讨论 2020-02-29 18:29:10
    template 里代码 已完成超时待完成 注意: gantt-chart 一定要设置宽高,否则无法显示 script代码 import echarts from 'echarts' // 注意echarts版本,高版本不支持透明度rgba,以下代码版本为3.8.5 export ...
  • vue实现甘特图,动态展示数据

    千次阅读 2019-10-14 11:08:59
    1.在开发一个后台系统时,遇到一个甘特图的需求 2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求 效果 <template> <div class="hello"> <!--Echarts图表盒子--> &...
  • Echart甘特图实现效果

    2019-12-06 14:26:21
    因为echarts官网并没有提供类似甘蔗这样的Demo实例,研究了相关的图表并做稍作处理之后,得到如下: 效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBuseRmt-1575613186267)...
  • 甘特图.rar

    2019-06-13 14:16:18
    通过对Echarts图表框架的变种封装的方式,实现传入所需数据源即可绘制出相应甘特图的功能
  • 统计式甘特图

    2020-07-29 17:02:23
    统计式甘特图 由于项目需要如图的效果,在网上找的都不如意,在echarts的demo下和大佬的帮助下实现了这一效果,希望对你有帮助! 图片: 不多说,直接上代码: var myCharts = echarts.init(document....
  • echarts的简单应用

    2019-06-27 19:23:00
    echarts是百度强大的数据可视化控件 这里做了个演示:... 分别用到了柱状图,仪表盘和自定义的甘特图,并实现点击柱状图进行数据切换 转载于:https://www.cnblogs.com/sz-toosimple/p/11099179.html...
  • 网站访问量静态日志文件分析系统目录大纲获取静态日志数据预处理新建Maven打包jar包运行数据仓库开发下载安装hive修改配置文件配置MySQL元数据库实现数据仓库数据分析流量分析人均浏览量分析sqoop数据导出安装Sqoop...
  • 关键词云图加搜索插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • ganttdemo

    2017-06-12 18:00:48
    最近项目中需要画一个比较简单的甘特图,本来准备用echarts画,但是实现起来比较复杂,就找了一个其他的插件。 使用到的js叫做jquery.fn.gantt.js,这款插件用的jquery版本有点老,用的是1.0几的版本,所以可能无法...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

echarts实现甘特图