关于ECharts甘特图的实现

对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解

此处只分享甘特图的option,代码如下:

option: {
        title: {
          text: ‘项目实施进度表‘,
          left: 10
        },
        legend: {
          y: ‘bottom‘,
          data: [‘计划时间‘, ‘实际时间‘]
        },
        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‘)
            ]
          },
          {
            name: ‘计划时间‘,
            type: ‘bar‘,
            stack: ‘test1‘,
            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‘)
            ]
          },
          {
            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‘)
            ]
          },
          {
            name: ‘实际时间‘,
            type: ‘bar‘,
            stack: ‘test2‘,
            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‘)
            ]
          }
        ]
      }

注意:若ECharts版本在4.0.2以上,会出现起点从坐标轴开始的问题,建议降低ECharts版本到4.0.2

原文地址:https://www.cnblogs.com/jane2160/p/11392753.html

时间: 2025-01-11 12:56:01

关于ECharts甘特图的实现的相关文章

Echarts甘特图

Echarts原本提供的图形库已经很强大了. 但是无奈,坐标系图形必须要求X,Y轴必须有一个为数字. 最近有个需求是做甘特图. 整了几天,现在把代码发出来分享一下. option = {  title : {      text: 'test',      x:'center'  },  calculable:false,  tooltip : {      trigger: 'axis',      axisPointer:{   type : 'line',   lineStyle : {

基于 ECharts 封装甘特图并实现自动滚屏

项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件,所以这里只介绍甘特图组件的实现,图表的初始化.数据更新.自适应等不在这里介绍 一.约定数据格式 EChart 本身没有甘特图,但可以通过 EChart 提供的“自定义”方法 type: 'custom' 开发 const option = { series: [{ type: 'custom',

Excel2013版——甘特图

最近正在补文档,因为师父验收的时候文档里面应该有的一些图都没有加入,所以欠下的终究要换回去的,不过也有一个好处就是可以有理由多了解一些东西,可能如果以后不当项目组长或是没有这个任务给我分配我就永远不会去碰. 下面说一下我们<项目开发计划>文档中的甘特图的画法: 1.在Excel中按照下图写好你的任务.开始时间.持续时间.完成时间 2.选中表中内容--插入--小箭头 3.出现插入图标的界面--所有图标--条形图--第三个即可 即出现如下图: 4.双击项目所在的纵坐标出,初夏你设置坐标轴格式,选择

依赖关系助力XMind 6中的甘特图

在XMind 6思维导图中,用户可以利用甘特图功能来进行项目管理,在项目实施过程中,您可能会经常需要为某两个任务之间建立一种依赖关系.现在,我们可以很方便地在XMind 6甘特图里面轻松做到这点. 在XMind 6甘特图中建立依赖关系步骤: 步骤一 选择某一任务主题. 步骤二 进入任务信息视图,从菜单选择[视图],点击"任务信息"选项. 步骤三 滚动到视图的底部,在任务关联对象一栏点击加号添加. 步骤四 在对话框中选择关联的任务主题. 步骤五 确定依赖关系的类型. ?截止日期-至-开始

一个好用的web甘特图

前些天一直在弄web甘特图,发现网上很多web甘特图框架,但大部分是收费的.偶尔发现了向日葵甘特图 感觉不错,特此写下来一方面当做记录,另一方面也为寻找web甘特图的同学们少走一些弯路,双赢嘛~      向日葵甘特图是纯js编写,相比于其他庞大的甘特图应用,好处不用多说:轻便易于和网页应用嵌套(其他的同学们可以自己体会). 网上提供了一个远程js库和相应API,我们可以方便的进行二次开发.同学们网上一搜即可找到. 本甘特图以XML作为数据传输格式,基本格式如下: <Tasks> <Ta

图表推荐:甘特图与框架图,大数据流向地图重磅来袭!

帆软图表(新特性)最新版本的图表插件新增了甘特图与框架图两种图表类型,大大方便了生产管理所需,同时支持流向地图的大数据模式. 一.甘特图 甘特图又称任务计划进度图,其通常用来表示项目进展随着时间进度的变化.甘特图被广泛的应用在各行业的项目管理中,因此帆软在最新的图表插件中,新增了该图表类型,以满足任务进度可视化的需求. FineReport新甘特图功能扩展十分强大,能够满足多层级项目所需以及多系列任务:支持各个任务的里程碑设置.进度管理等:包含四种任务关联线 (开始-完成,开始-开始,完成-开始

Twproject Gantt开源甘特图功能扩展

1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. 官网地址是:https://gantt.twproject.com/ 源码可以从github下载: 2.扩展功能一:code自动层级编码,满足wbs编码要求 工作分解结构 (WBS) 代码是项目的识别您的分级显示结构中的每个任务的唯一位置的字母数字代码.

银光甘特图/日历图/排程控件GTP.NET for Silverlight详细介绍

GTP.NET for Silverlight是Silverlight下的控件包,提供了交互式的甘特图以及日程安排图,达到时间上可视化和交互,控件完全分发免费.方案网作为PlexityHide在中国的核心代理商,为客户提供优质的客服和技术支持.                          具体功能: 提供了丰富的用户界面直接运行于Silverlight插件下 使用Silverlight开发,达到了跨平台的目的,包括Apple Machintosh和 Microsoft Windows 提供

如何画出甘特图——2013版Excel

学习了这久,这还是我第一次接触甘特图.现在来说说用excel画甘特图. 理论: 甘特图,也称为条状图(Bar chart).是在1917年由亨利·甘特开发的,其内在思想简单,基本是一条线条图,横轴表示时间,纵轴表示活动(项目),线条表示在整个期间上计划和实际的活动完成情况.它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比. 管理者由此极为便利地弄清一项任务(项目)还剩下哪些工作要做,并可评估工作是提前还是滞后,亦或正常进行.是一种理想的控制工具.其中甘特图的含义有三个: 1.以图形