echarts bar markArea

之前产品给的需求是，在特定的x轴上，给某些指标加上背景颜色，看了Echarts API的markArea，发现不能满足需求。

如果直接使用markArea，且x轴的type为category的话，配置如下：

xAxis: {
  type: 'category',
  ...
},
series: [{
  ...,
  markArea: {
    data: [[
      {
        xAxis: '11月3日',
        itemStyle: {
          color: 'rgba(112, 100, 250, 0.12)',
          borderWidth: 1,
          borderColor: 'rgba(112, 100, 250, 0.6)'
        } 
      },
      {
        xAxis: '11月6日'
      }
    ]] 
  }
}]

得到的效果图为：

可以看出，不能完整包含指定的x轴。

后面google（参考链接：Echart: How to set mark area to fill sections in xAxis）发现了一个近似满足需求的处理，思路是通过计算bar的宽度，从而相加得到的，但不能完整包含x轴，效果如下图所示：

既然不能找到完全满足需求的，那就只能写骚操作了。

思路如下：
（1）多定义一条x轴，type设置为value，但不显示
（2）多定义一个series，将markArea配置放在这个series上，且将该series挂载在(1）的x轴上

xAxis: [
  {...}, 
  {
    type: 'value',
    min: 0,
    max: xAxisData.length, // x轴数据的长度
    show: false,
    silent: true,
    axisPointer: {
      show: false
    }
  }
],
series: [
  {...},
  {
    name: '占位',
    type: 'line',
    xAxisIndex: 1, // 对应第二个x轴
    silent: true,
    markArea: {
      data: [[
        {
          xAxis: '3',
          itemStyle: {
            color: 'rgba(112, 100, 250, 0.12)',
            borderWidth: 1,
            borderColor: 'rgba(112, 100, 250, 0.6)'
          } 
        },
        {
          xAxis: '6'
        }
      ]],  
    }
]

最终的效果图为：