echarts渐变分段柱状图

具体效果描述和展示：

关键词：柱状图，分段，渐变，区间X轴
简述：每段区间上都有6段数据，需要以分段的柱状图表示出来。

下图的分段数据是随机生成的，可能有重复的数据

---

构思

开发业务的时候，业务中某个图表的原型是这样的，在某个区间上会有几组长度的数据，既要展示分段的效果，也要有堆叠的效果。

• 柱状图：楼主一开始考虑的是堆叠柱状图做分段的效果，但是又需求又要是每个柱子都是渐变的，用堆叠柱状图不好弄这个整体的渐变效果，所以最后就是使用了普通柱状图和象形柱状图来做这个效果。
  象形柱状图的用处在于画出每一段的起始点（除第一段）
  举例说明：[-10,-8]区间上有6段数据[3,5,10,8,9,6]，累计是41，分段的位置应该就是[3,8,18,26,35]
  象形柱状图的[echarts文档]
• 区间坐标轴：要实现上图的效果需要用到两个x轴叠加，一个用于画数据（隐藏），一个用于展示用。

---

代码部分：

一些比较重要的配置项会有注释，仅供参考。

var barArr=[120, 200, 150, 80, 70, 110, 130,80,60,90]
/*
 每个区间随机生成5个数据模拟象形柱状图的填充数组
 画六段分开的柱子就要有5个数据，以此类推
 该函数只做生成示例使用，具体可结合需求设置picArr
 start 左区间
 end 右区间
 step 区间步长
 barArr 普通柱状图填充数组
*/
function setPicArr(start,end,step,barArr){
  let picArr=[]
  let cur=start
  let i=0
  while(cur<=end){
    if(cur!==0){
      for(let j=0;j<5;j++){
        picArr.push({value:[cur.toString(),Math.floor((Math.random()*(barArr[i]-1))+1)]})
      }
      i++
    }
    cur+=step
  }
  return picArr
}
var option = {
  grid: [
    {
      top: 50,
      bottom: 50,
      left: 50,
      right: 50
    },
    {
      top: 50,
      bottom: 50,
      left: 50,
      right: 50
    }
  ],
  xAxis: [
  	//该坐标轴隐藏，柱状图和象形柱状图都画在该坐标轴上，无0刻度
    {
      type: 'category',
      show: false,
      data: [-10, -8, -6, -4, -2, 2, 4, 6, 8, 10],
      gridIndex: 0
    },
    //该坐标轴作为展示使用
    {
      type: 'category',
      boundaryGap: false,
      data: [-10, -8, -6, -4, -2, 0, 2, 4, 6, 8, 10],
      gridIndex: 1
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0
    },
    {
      type: 'value',
      gridIndex: 1
    }
  ],
  series: [
  	//普通柱状图
    {
      data: barArr,
      type: 'bar',
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0.6,
          color: 'rgba(142,197,252,0.5)'
        },
        {
          offset: 0.3,
          color: 'rgba(224,60,252,0.5)'
        }
      ])
    },
    //象形柱状图
    {
      type: 'pictorialBar',
      symbol: 'rect',
      symbolSize: ['100%', 3],
      z: 10,
      symbolPosition: 'end',//象形柱状图每个数据画的位置，可选选项具体有
      itemStyle: {
        color: '#fff'
      },
      data: setPicArr(-10,10,2,barArr)
    }
  ]
};

---