echarts表的横向多表格式

echarts表的横向多表格式

1，情景描述：echarts想实现如下格式的柱状图

2，代码实现：

option = {
    title: [{
        'text': 'aaa',
        left: 0
    }, {
        'text': 'bbb',
        left: '30%'
    },{
        'text': 'ccc',
        left: '60%'
    }],
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        x: 'right',
        show: true,
        feature: {
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            saveAsImage: {
                show: true
            }
        }
    },
    grid: [{
        //top: 50,
        width: '30%',
        bottom: '15%',
        left: 0,
        containLabel: true
    }, {
        //top: 50,
        width: '30%',
        bottom: '15%',
        left: '30%',
        containLabel: true
    },{
        //top: 50,
        width: '50%',
        bottom: '15%',
        left: '60%',
        containLabel: true
    }],
    legend: {
        y: 'bottom',
        data: ['数据1', '数据2']
    },
    dataZoom:{
        show:true,
        realtime:true,
        showDetail:true,
        left:'0%',
        right:'0%',
        bottom:'7%',
        top:'88%',
        xAxisIndex:[0,1,2],
        start:20,
        end:80,
    },
    xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                show: false
            }
        },
        {
            type: 'category',
            gridIndex: 1,
            data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
            axisTick: {
                show: false
            }
        },
        {
            type: 'category',
            gridIndex: 2,
            data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
            axisTick: {
                show: false
            }
        }
    ],
    yAxis: [{
            type: 'value',
            gridIndex: 0,
            show: true,
            max: 600
        },
        {
            type: 'value',
            gridIndex: 1,
            show: true
        },
        {
            type: 'value',
            gridIndex: 2,
            show: true
        }
    ],
    series: [{
            data: [60, 70, 80, 95, 110, 120, 130],
            type: 'bar',
            gridIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '数据1'
        },
        {
            data: [130, 120, 110, 95, 80, 70, 600],
            type: 'bar',
            gridIndex: 1,
            xAxisIndex: 1,
            yAxisIndex: 1,
            name: '数据1'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',
            gridIndex: 0,
            xAxisIndex: 1,
            yAxisIndex: 1,
            name: '数据2'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',
            gridIndex: 2,
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '数据2'
        }
    ]
};