echarts自定义甘特图实现双x轴计划图

代码：

let fontcol = "#00000087"; // xy轴文字颜色
let this_ = {};
this_.colmap = {
  'I': '#BCFAEA',
  'II': '#B9D8FF',
  'III': '#E9E2FC',
  'IV': '#FFFB9D',
  'V': '#FFE2B4',
  'VI': '#FFC9BC',
}
this_.categories = ['开挖上台阶', '开挖下台阶', '初支上台阶', '初支下台阶', '二衬', '仰拱'];
this_.dataE = [ //0:表开挖上台阶，1：表开挖下台阶，2：表初支上台阶，3：表初支下台阶，4：表二衬，5：表仰拱，
  { "name": "开挖上台阶", "value": [0, 0, 2] },
  { "name": "开挖上台阶", "value": [0, 0, 2] },
  { "name": "开挖上台阶", "value": [0, 3, 4] },
  { "name": "开挖下台阶", "value": [1, 5, 6] },
  { "name": "开挖下台阶", "value": [1, 6, 8] },
  { "name": "初支上台阶", "value": [2, 6, 8] },
  { "name": "初支上台阶", "value": [2, 6, 8] },
  { "name": "初支下台阶", "value": [3, 6, 8] },
  { "name": "初支下台阶", "value": [3, 6, 8] },
  { "name": "二衬", "value": [4, 6, 8] },
  { "name": "二衬", "value": [4, 6, 8] },
  { "name": "仰拱", "value": [5, 6, 8] },
  { "name": "仰拱", "value": [5, 6, 8] },
];

this_.categories1 = ['围岩等级'];
this_.dataE1 = [
  { "name": "I", "value": [0, 0, 2] },
  { "name": "II", "value": [0, 2, 3] },
  { "name": "III", "value": [0, 3, 4] },
  { "name": "IV", "value": [0, 4, 6] },
  { "name": "V", "value": [0, 6, 7] },
  { "name": "VI", "value": [0, 7, 8] },
]

// 设置柱状图不同颜色
for (var i = 0; i < this_.dataE1.length; i++) {
  this_.dataE1[i].itemStyle = { "normal": { "color": this_.colmap[this_.dataE1[i].name] } };
  this_.dataE1[i].label = { "normal": { "show": true, "color": "#00000087", "position": 'inside', 'formatter': '{b}', } };
}

// 自定义渲染图形
let renderItem = function (params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.5; // 柱状图高度

  var rectShape = 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
  });
  return rectShape && {
    type: 'rect',
    transition: ['shape'],
    shape: rectShape,
    style: api.style()
  };
}
this_.renderItem = renderItem;
let series = [{
  type: 'custom',
  renderItem: this_.renderItem,
  itemStyle: {
    opacity: 0.8,
    color: '#146FD7', // 柱状图颜色
  },
  encode: {
    x: [1, 2],
    y: 0
  },
  data: this_.dataE,
  xAxisIndex: 0,
  yAxisIndex: 0
}, {
  type: 'custom',
  renderItem: this_.renderItem,
  itemStyle: {
    opacity: 0.8,
    color: '#146FD7', // 柱状图颜色
  },
  encode: {
    x: [1, 2],
    y: 0
  },
  data: this_.dataE1,
  xAxisIndex: 1,
  yAxisIndex: 1
}];

option = {
  tooltip: {
    formatter: function (params) {
      console.log('params', params);
      if (params.value && params.value.length >= 3) {
        return params.marker + this_.categories[params.value[0]] + ':' + '桩号' + params.value[1] + '~' + params.value[2];
      } else {
        return "";
      }
    }
  },
  dataZoom: [{
    type: 'slider',
    filterMode: 'weakFilter',
    xAxisIndex: [0, 1], // 表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis
    showDetail: false,
    showDataShadow: false	//值也可为"-5px",解决拖动条宽度问题			
  },
  ],
  grid: [{
    top: 100,
    bottom: 80
  }, {
    height: 50,
    bottom: 80,
    tooltip: { show: false }
  }],
  xAxis: [{
    gridIndex: 0,
    axisLabel: {
      // formatter: function (val) {
      //       var da= new Date(Number(val));
      //       var s=(da.getMonth()+1)+"-"+da.getDate()+" "+da.getHours();
      //       return s;
      // }
    },
    axisLine: {
      lineStyle: {
        color: fontcol
      }
    },
    axisPointer: {
      // show: true,
      // label:{
      //     formatter:function(params){
      //       let a=parseInt(params.value);
      //       return new Date(a).toLocaleString();
      //     },
      //     color:'black',
      // },
    },
    zlevel: 2
  }, {
    gridIndex: 1,
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    zlevel: 1
  }],
  yAxis: [{
    gridIndex: 0,
    data: this_.categories,
    axisLine: {
      lineStyle: {
        color: fontcol
      }
    },
  }, {
    gridIndex: 1,
    axisLabel: { show: false },
    axisLine: { show: false },
    splitLine: { show: false },
    axisTick: { show: false }
  }],
  series,
}; 

效果：