echarts一个option实现多图表布局的案例

function getArrayValue(array, keys) {
    var keys = keys || "value";
    var res = [];
    if (array) {
        array.forEach(function(t) {
            res.push(t[keys]);
        });
    }
    return res;
}


var data = [{
        value: 35,
        name: '报废量'
    },
    {
        value: 110,
        name: '维修量'
    },
    {
        value: 274,
        name: '出货量'
    },
    {
        name: '进货量',
        value: 500

    }
];

var dataName = getArrayValue(data, "name");
var dataBar = getArrayValue(data, "value");

option = {
    grid: [{
        left: '5%',
        width: '55%',
    }],
    legend: {
        data: dataName,
    },
    yAxis: {
        show: false,
        type: 'category',
        data: dataName
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        data: dataBar,
        type: 'bar',
        gridIndex: 0,
        barWidth: '30%',
        label: {
            show: true,
            formatter: function(parmas) {
                return parmas.name + '：' + parmas.value + '台';
            },
            position: ['0', '-20']
        },
        itemStyle: {
            barBorderRadius: 10,
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#0e66f6'
                }, {
                    offset: 1,
                    color: '#03dff6'
                }],
                global: false
            }
        }
    }, {
        color:['#0d6bf6','#03e2f6','#9407fc','#faee04'],
        data: data,
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['70%', '60%'],
        label:{
            show:true,
            formatter:'{b} ：{d}%',
            
        }
    }]
};