多维度-表格echarts 柱状配置项内容和展示

配置项如下
      var data = {
    xjm: [500, 300, 490, 333, 346],
    zjm: [300, 400, 500, 300, 400],
    djm: [60, 80, 90, 60, 70]
};

function getTableLine(num) {
    var list = [];
    var bottom = 250;
    var height = 20;
    for (var i = 0; i < num; i++) {
        list.push({
            type: 'line',
            bottom: bottom - i * height,
            right: 10,
            style: {
                fill: '#333'
            },
            shape: {
                x1: 0,
                y1: 0,
                x2: 3200,
                y2: 0
            }

        });
    }
    return list;
}
var lineList = getTableLine(4);

option = {
  	color: ['#3e6591', '#eb7d22', '#d73f45'],
  	title: [{
        text: ' \n小截面\n中截面\n大截面',
        bottom: 215,
        left: 10,
        textStyle: {
            lineHeight: 20,
            fontSize: 13,
           fontWeight: 'bold',
            formatter: function(value) {
                return '{table|' + value + '}';
            },
            rich: {
                table: {
                    align: 'center'
                }
            }
        }
    }],
    // legend: {
    //     data: ['35KV', '110KV', '220KV', '500KV','800KV']
    // },
  	grid: {
      	bottom: 300,
        left:60,
        right: 10
    },
    
  
    yAxis:  {
            type : 'value',
        },
    xAxis: [{
                type: 'category',
                boundaryGap: true,
               	offset: 20,
               	axisTick: {
                   	length: 110
                 },     
                 data: ['35KV', '110KV', '220KV', '500KV', '800KV'],
                axisLabel: {
                    formatter: function(value, index) {
                        return '{table|' + value +
                            '}\n{table|' + data.xjm[index] +
                            '}\n{table|' + data.zjm[index] +
                            '}\n{table|' + data.djm[index]+'}';
                    },
                    rich: {
                        table: {
                            lineHeight: 20,
                            fontWeight:'bold',
                            align: 'center'
                        }
                    }
                }
            }
        ],
     series: [{
                type: 'bar',
                data:[220, 182, 191, 234, 290],
                label: {
                 	normal: {
                      	show: true,
                      	position: 'bottom',
                      	textStyle: {color: '#000'},
                      	formatter: '小截面'
                    }
                }
            }, {
                type: 'bar',
                data:[210, 132, 91, 204, 220],
                label: {
                 	normal: {
                      	show: true,
                      	position: 'bottom',
                      	textStyle: {color: '#000'},
                      	formatter: '中截面',              
                    }
                }      
            }, {
                type: 'bar',
                data:[120, 132, 131, 254, 278],
                label: {
                 	normal: {
                      	show: true,
                      	position: 'bottom',
                      	textStyle: {color: '#000'},
                      	formatter: '大截面',              
                    }
                }      
            }],
             graphic: lineList
};
    
截图如下