關于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資料這些處理不要大意了。