關於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

 

補充：若數據太多而顯示太緊密的話，可以給圖表設置滾動條，在option中添加滾動條屬性，代碼如下：

具體配置可參考ECharts配置文檔 https://www.echartsjs.com/option.html#title

dataZoom: [
          {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            startValue: 0,
            endValue: 9,
            handleSize: 0,
            showDetail: false,
            right: '5%',
            width: '2%'
          }
        ]