echarts 甘特图代码

效果如图

 代码。。。

var option = {
      grid: {
        left: '1%',
        right: '5%',
        bottom: '3%',
        top: '1%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        position: 'top',
        interval: 2,   //以一个小时递增 
        max: 30,
        min: 0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
        axisLabel: {
          show: true,
          formatter: function (value, index) {
            return value ? value : '';
          }
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.1)',
          }
        },
        data: ['aaa', 'bbb', 'ccc', 'ddd'],
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 0.65)", //刻度颜色
            fontSize: 14  //刻度大小
          },
        }
      },
      series: [
        {
          type: 'custom',
          renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
            var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
            var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
            var end = api.coord([api.value(2), categoryIndex]);
            // var height = api.size([0, 1])[1];
            var height = 20;
            return {
              type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
              shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              }, { // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              }),
              style: api.style()
            };
          },
          encode: {
            x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
            y: 0// data 中『维度0』对应到 Y 轴
          },
          itemStyle: {
            normal: {
              color: '#0A8BFF'
            }
          },
          data: [[0, 3, 5], [0, 3, 5], [0, 6, 10], [1, 2, 3], [1, 3, 4], [1, 6, 8], [1, 12, 20]]
        }
      ]
    };