关于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>"
                    });