echarts表的田字格多表格式

echarts表的田字格多表格式

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

2，代码实现：

option = {
   title: [{
        'text': 'aaa',
        left: 0,
        top:0,
    }, {
        'text': 'bbb',
        left: '50%',
        top:0,
    },{
        'text': 'ccc',
        left: 0,
        top:'30%',
    }, {
        'text': 'ddd',
        left: '50%',
        top:'30%',
    },{
        'text': 'eee',
        left: 0,
        top:'60%',
    }
    ],
    tooltip: {
        trigger: 'axis'
    },
   grid: [
        {x: '7%', y: '7%', width: '38%', height: '25%',top:'5%'},
        {x2: '7%', y: '7%', width: '38%', height: '25%',top:'5%'},
        {x: '7%', y2: '7%', width: '38%', height: '25%',top:'35%'},
        {x2: '7%', y2: '7%', width: '38%', height: '25%',top:'35%'},
        {x: '8%', y3: '7%', width: '38%', height: '25%',top:'65%'},
        {x2: '7%', y3: '7%', width: '38%', height: '25%',top:'65%'}
    ],

    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        x: 'right',
        show: true,
        feature: {
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        y: 'bottom',
        data: ['数据1', '数据2']
    },
    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
            }
        },
        {
            type: 'category',
            gridIndex: 3,
            data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
            axisTick: {
                show: false
            }
        },
        {
            type: 'category',
            gridIndex: 4,
            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
        },
        {
            type: 'value',
            gridIndex: 3,
            show: true
        },
        {
            type: 'value',
            gridIndex: 4,
            show: true
        },

    ],
    series: [{
            data: [60, 70, 80, 95, 110, 120, 130],
            type: 'bar',

            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '数据1',

        },
        {
            data: [130, 120, 110, 95, 80, 70, 600],
            type: 'bar',

            xAxisIndex: 1,
            yAxisIndex: 1,
            name: '数据1'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',

            xAxisIndex: 1,
            yAxisIndex: 1,
            name: '数据2'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',

            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '数据2'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',
            xAxisIndex: 3,
            yAxisIndex: 3,
            name: '数据2'
        },
        {
            data: [230, 220, 210, 195, 180, 170, 200],
            type: 'bar',
            xAxisIndex: 4,
            yAxisIndex: 4,
            name: '数据2'
        },

    ]
};