echarts分组嵌套柱状图

echarts分组嵌套柱状图

最近在工作中基本上每天都是在与echarts打交道，也难免会遇上一些比较棘手的需求，今天给大家分享的是分组嵌套柱状图，我们先了解何为分组柱状图，就是一个X轴会有多条柱子echarts官网图例上有例子，那何为嵌套柱状图呢？就是柱子里面还包裹一根柱子，其实就是两根柱子重叠在一起外层柱子的宽度设置比里层柱子的宽度宽一些就好了。接下来给大家看一张图：

这种就属于嵌套柱状图，但是只适合当我们X轴数据项只有两项时，我们直接使用barGap属性就可以实现这个效果，这个属性就是合并的意思，那如果我们X轴的数据项有多条的时候呢？就不适合这种方式了，不然多条数据项就合并成一条柱子了，那我说的是什么效果呢？如图（分组嵌套柱状图）：

颜色比较丑，方便大家查看就没有调，哈哈，这种就是分组嵌套柱状图，多条数据嵌套，其实这个效果用barGap也可以实现不过比较麻烦还会有bug，bug就是当我们取消任意一个legend项，柱子的位置会发生错位，反正我不能接受，于是我采用另一种方案（象形柱状图图），话不多说上demo代码：

//下面就是上图的配置项，关键部分有注释
option = {
  title: {
    text: '业绩报表'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  series: [
    {//里层的柱子
      name: '销售部A组',
      type: 'pictorialBar',//象形柱状图
      barWidth:30,//柱子的宽度
      data: [72, 79,70, 67, 59],//柱子的数据
      symbol:'circle',//柱子的形状
      symbolRepeat:true,//是否重复
      symbolOffset: [-30, 0],//柱子的位置
      symbolBoundingData:1,//图形的个数
      z:12//柱子的层级
    },
    { //外层的柱子
        name: "销售部B组",
        type: "pictorialBar",
        barWidth:50,
        //symbolSize: [40, 18], //调整截面形状
        symbolOffset: [-40, 0],
        symbol:'circle',
        symbolRepeat:true,
        symbolBoundingData:1,
        itemStyle: {
                color: ''
        },
        data: [82, 89,90, 97, 79]
    },
    {//里面的柱子
      name: '营销部A组',
      type: 'pictorialBar',
      data: [73, 80, 71, 75, 64],
      barWidth:30,
      symbol:'circle',
      symbolRepeat:true,
      symbolOffset: [40, 0],
      symbolBoundingData:1,
      z:12
    },
    { //外面的柱子
      name: "营销部B组",
      type: "pictorialBar",
      barWidth:50,
      //symbolSize: [40, 18], //调整截面形状
      symbolOffset: [30, 0],
      symbol:'circle',
      symbolRepeat:true,
      symbolBoundingData:1,
      itemStyle: {
          color:''
      },
      data: [82, 89, 89, 97, 79]
    },
  ]
};

象形柱状图需要自己指定图形，默认配置是有限的，如果不够你用，你就需要自己引入外部链接的图形，我只需要一个圆角的效果，所以选择的图形类型是圆，设置不重复，然后设置个数为一个，相当与把一个圆拉长了，所以就有了圆角的效果，通过调整位置让对应的柱子重叠，然后两根柱子的宽度差异，达到的效果，这种方式的好处就是我们点击legend任意一项取消，柱子的位置不会发生错位。如果你刚好也遇到了这个问题，我相信你一定也能看懂，如果有问题欢迎随时沟通，感谢每一次的相遇。哈哈哈