使用echarts时，将xAxis的type设置为time时，x轴跨月显示间隙不规则

Question

下面是现在的代码：

this.flowChart = echarts.init(this.$refs.flowChartRef)
      var color = '#37D6FF' // 三种状态的颜色
      var state = [
        '考试文件',
        '考试承诺',
        '资料登记',
        '报考信息',
        '资格审查',
        '证明材料',
        '网上缴费',
        '报考完成',
        '考前改报'
      ] // 三种状态
      this.flowChart.setOption({
        // echart配置
        color: color,
        tooltip: {
          // 提示框
          formatter: function(params) {
            return params.name + ':' + params.value[1] + '~' + params.value[2]
          } // 数据的值
        },
        legend: {
          // 图例
          data: state,
          bottom: '1%',
          selectedMode: false, // 图例设为不可点击
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          // 绘图网格
          left: '3%',
          right: '3%',
          top: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'time',
          interval: 3600 * 1000 * 24, // 以一天递增
          // min: '2009/09/01', // 将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
          // max: '2009/10/18',
          axisLabel: {
            formatter: function(value) {
              var date = new Date(value)
              var month = date.getMonth() + 1
              month = String(month).length > 1 ? month : '0' + month
              var day = date.getDate()
              day = String(day).length > 1 ? day : '0' + day
              var year = date.getFullYear()
              return year + '/' + month + '/' + day
            },
            textStyle: {
              color: '#D2E4FF'
            },
            interval: 0,
            rotate: -90
          }
        },
        yAxis: {
          data: [
            '考试文件',
            '考试承诺',
            '资料登记',
            '报考信息',
            '资格审查',
            '证明材料',
            '网上缴费',
            '报考完成',
            '考前改报'
          ],
          axisTick: false,
          axisLine: {
            lineStyle: {
              width: 0,
              color: '#D2E4FF'
            }
          }
        },
        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] - 15

              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 轴
            },
            data: [
              // 维度0 维度1 维度2
              {
                name: '考试文件',
                value: [0, '2009/09/01', '2009/09/07'] // 0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
              },
              {
                name: '考试承诺',
                value: [1, '2009/09/04', '2009/09/08']
              },
              {
                name: '资料登记',
                value: [2, '2009/09/09', '2009/09/12']
              },
              {
                name: '报考信息',
                value: [3, '2009/09/19', '2009/10/02']
              },
              {
                name: '报考信息',
                value: [4, '2009/09/19', '2009/10/03']
              },
              {
                name: '报考信息',
                value: [5, '2009/09/19', '2009/10/03']
              },
              {
                name: '报考信息',
                value: [6, '2009/10/04', '2009/10/10']
              },
              {
                name: '报考信息',
                value: [7, '2009/10/10', '2009/10/12']
              },
              {
                name: '报考信息',
                value: [8, '2009/10/11', '2009/10/18']
              }
            ]
          }
        ]
      })

这是现在的效果：

问题就是9月到10月的跨度那里，怎么才能在09/29之后间隙正常，并且显示的是10/06

Answer 1

搞定了吗，我现在也碰到这个问题