echarts柱图分组显示(簇状柱形图)

需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割

所用属性：yAxis/xAxis.splitArea

splitArea：坐标轴在 grid 区域中的分隔区域

思路：其实我这个很简单，就是在拿到数据后进行个处理，将相同类型的数据相邻排放，然后在渲染的时候，给每个柱图背景色，这样的话，同类型的柱子背景色一样，就形成了区域分组效果

代码如下

//x轴数据
var _xAxis = ['红1', '红2','绿1','绿2','黄1','黄2','橘1','橘2'];
//y轴数据
var _yAxis = [10, 52,10,13,32,14,3,23];
option = {
   title: {
      text: '分组柱图',
      textStyle:{
         color:"#666666",
         fontSize: 16,
         fontWeight:"normal"
      },
      top:"8",
      left:"17"
   },
   color: ['#297E3A'],
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
  xAxis : [
       {
          type : 'category',
           data : _xAxis,
           splitArea: {
               show: true,
               //柱图背景色，由于数据已经处理，所以可以直接设置背景色，在项目中，可以使用循环方法根据条件往颜色数组去push颜色
               areaStyle: {
                   color: ['#f00','#f00','#0f0','#0f0','#ff0','#ff0','#f66','#f66']
               }
           }
       }
   ],
   yAxis : [{
      type : 'value'
   }],
   series : [
       {
           name:'柱子',
           type:'bar',
           barWidth: '50%',
           data: _yAxis,
           itemStyle: {
               normal: {
                   label: {
                       show: true,//是否展示
                       textStyle: {
                           fontWeight:'bolder',
                           fontSize : '12',
                           fontFamily : '微软雅黑',
                       }
                   }
               }
           },
           label: {
               normal: {
                   show: true,
                   color: '#000000',
                   position: 'top'
               }
           }
       }
   ]
};