关于echarts套娃柱状图（嵌套柱）的实现

嘻嘻嘻先上图看效果：

是不是有一种套娃的感觉。

这个图表的实现其实就是多个柱状图叠在一起，然后个别设置宽度，重点看 xAxis  和 series -> xAxisIndex 的对应。

注意：由于有多个 xAxis，所以对于 tooltip -> formatter 的格式重置也是很重要的。  

          

 var myChartc = echarts.init(document.getElementById('echarts'));
        // 显示标题，图例和空的坐标
        myChartc.showLoading();    //数据加载完之前先显示一段简单的loading动画
        myChartc.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                show:true,
                formatter: function(params) { //设置滑过显示小圆点以及对应数据的位置 方便看数
                    var result = params[0].name+'<br>';
                    params.forEach(function(item) {
                          result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                          result +=item.seriesName+": "+'<span style="color:#fff">'+ item.data+"</span><br>"
                    });

                        return result;
                },
            },
            grid: {
                left: '0'
            },
            legend: {
                data: [
                'A**数', 'B**数', 'C**数', '', 'D**数','E**数', 'F**数'
                ],
                textStyle:{
                   color:'#fff'
                },
                padding:20,
                margin:20
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            grid: {
                y: 70, y2: 30, x2: 60,
                tooltip:{
                    show:true
                }
            },
            yAxis:
            {
                name: '人数',
                nameTextStyle:{
                    color:'#fff'
                },
                splitLine: {show: true},//去除网格线
                type: 'value',
                axisLabel: {
                    show: true,
                    interval:0,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {show: false}
            },

            xAxis: [
            //x轴只显示一个就可以 对应 xAxisIndex: 0,A***数           
            {
                axisLabel :{
                    interval:0,
                    textStyle: {
                        color: '#fff'
                    },
                    show:true
                },
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle:{
                        color:'#fff'
                    },
                    show:false
                },
                data: monthD, // 日期X轴 
            },
            //对应 xAxisIndex: 1,B***数 
             {
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},
                data: monthD
            },
            //对应 xAxisIndex: 2,C***数 
            {
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},
                data: monthD
            },
            //对应 xAxisIndex: 3,D***数 
            {
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},
                data: monthD
            },
            //对应 xAxisIndex: 4,E***数 
            {
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},
                data: monthD
            },
            //对应 xAxisIndex: 5,F***数 
            {
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},
                data: monthD
            }
            ],
            series: [
            {
                name: 'A**数',
                type: 'bar',
                barGap: '0',
                barWidth: '90%',
                itemStyle: {normal: {color: '#ff735c', label: {show: false, textStyle: {color: '#fff'}}}},
                data: A
            },
            {
                name: 'B**数',
                type: 'bar',
                barGap: '0',
                barWidth: '75%',
                xAxisIndex: 2,
                itemStyle: {
                    normal: {
                        color: '#84c66e',
                        label: {show: false, textStyle: {color: '#27727B'}}
                    }
                },
                data: B
            },
            {
                name: 'C**数',
                type: 'bar',
                barGap: '0',
                barWidth: '65%',
                xAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#ffce55',
                        label: {show: false, textStyle: {color: '#27727B'}}
                    }
                },
                data: C
            },

            {
                name: 'D**数',
                type: 'bar',
                barGap: '0',
                barWidth: '50%',
                xAxisIndex: 3,
                itemStyle: {
                    normal: {
                        color: '#22ccdb',
                        label: {show: false, textStyle: {color: '#27727B'}}
                    }
                },
                data: D
            },
            {
                name: 'E**数',
                type: 'bar',
                barGap: '0',
                barWidth: '35%',
                xAxisIndex: 4,
                itemStyle: {
                    normal: {
                        color: '#009eed',
                        label: {show: false, textStyle: {color: '#27727B'}}
                    }
                },
                data: E
            },
            {
                name: 'F**数',
                type: 'bar',
                barGap: '0',
                barWidth: '20%',
                xAxisIndex: 5,
                itemStyle: {
                    normal: {
                        color: '#8686ff',
                        label: {show: false, textStyle: {color: '#27727B'}}
                    }
                },
                data: F
            }

                    ]
})

        myChartc.hideLoading(); //隐藏加载动画             

切记写demo的时候， 对应的data数据这些处理不要大意了。