{
    backgroundColor: '#bba',
    graphic: [{
        id: 'img',
        type: 'image',
        right: 20,
        top: 'center',
        style: {
            image: 'asset/echarts-logo.png',
            width: 50,
            height: 50,
            opacity: 0.5
        }
    }, {
        id: 'uriimg',
        type: 'image',
        origin: [20, 20],
        left: 10,
        top: 10,
        style: {
            image: imageURI,
            width: 80,
            height: 80,
            opacity: 0.5
        }
    }, {
        type: 'text',
        bottom: 0,
        right: 0,
        rotation: Math.PI / 4,
        style: {
            font: '24px Microsoft YaHei',
            text: '全屏右下角'
        },
        z: 100
    }, {
        type: 'text',
        bottom: 0,
        left: 'center',
        style: {
            font: '18px sans-serif',
            text: '全屏最下中间\n这是多行文字\n这是第三行'
        },
        z: 100
    }, {
        type: 'group',
        id: 'ggggg',
        right: 0,
        top: 0,
        bounding: 'raw',
        children: [{
            type: 'rect',
            left: 'center',
            top: 'middle',
            shape: {
                width: 80,
                height: 60
            },
            style: {
                fill: 'green'
            },
            z: 99
        }, {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
                font: '14px Microsoft YaHei',
                text: '居中定位\n文字居中\n应超出屏幕'
            },
            z: 100
        }]
    }, {
        type: 'group',
        id: 'gr',
        width: 230,
        height: 110,
        position: [70, 90],
        children: [{
            type: 'rect',
            shape: {
                width: 230,
                height: 80
            },
            style: {
                stroke: 'red',
                fill: 'transparent',
                lineWidth: 2
            },
            z: 100
        }, {
            type: 'rect',
            shape: {
                width: 60,
                height: 110
            },
            style: {
                stroke: 'red',
                fill: 'transparent',
                lineWidth: 2
            },
            z: 100
        }, {
            id: 'grouptext',
            type: 'text',
            bottom: 0,
            right: 0,
            rotation: 0.5,
            style: {
                font: '14px Microsoft YaHei',
                text: 'group最右下角'
            },
            z: 100
        }]
    }, {
        type: 'group',
        id: 'bl',
        width: '100%',
        height: '100%',
        children: [{
            type: 'rect',
            right: 0,
            bottom: 0,
            shape: {
                width: 200,
                height: 100
            },
            style: {
                stroke: 'blue',
                fill: 'blue',
                lineWidth: 2
            }
        }, {
            type: 'rect',
            position: [10, 20],
            shape: {
                width: 50,
                height: 150
            },
            style: {
                stroke: 'blue',
                fill: 'blue',
                lineWidth: 2
            }
        }, {
            type: 'group',
            width: '50%',
            height: '50%',
            children: [{
                type: 'rect',
                shape: {
                    width: 100,
                    height: 100
                },
                style: {
                    stroke: 'blue',
                    fill: 'blue',
                    lineWidth: 2
                },
                right: 0,
                bottom: 0
            }]
        }]
    }, {
        type: 'rect',
        right: 0,
        bottom: 0,
        shape: {
            width: 200,
            height: 100
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        }
    }, {
        type: 'rect',
        position: [10, 20],
        shape: {
            width: 50,
            height: 150
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        }
    }, {
        type: 'rect',
        shape: {
            width: 100,
            height: 100
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        },
        right: '50%',
        bottom: '50%'
    }, {
        type: 'text',
        position: [220, 20],
        style: {
            text: '蓝色矩形应与橙色矩形同一位置'
        }
    }]
}

{
    backgroundColor: 'rgba(0,0,255,0.08)',
    legend: {
        data:['高度(km)与气温(°C)变化关系']
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
    },
    yAxis: {
        type: 'category',
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    },
    graphic: [{
        type: 'image',
        id: 'img',
        z: -10,
        right: 0,
        top: 0,
        bounding: 'raw',
        origin: [75, 75],
        style: {
            fill: '#000',
            image: 'asset/echarts-logo.png',
            width: 150,
            height: 150,
            opacity: 0.4
        }
    }, {
        type: 'group',
        id: 'rectgroup1',
        bottom: 0,
        right: 0,
        bounding: 'raw',
        children: [{
            type: 'rect',
            left: 'center',
            top: 'center',
            shape: {
                width: 20,
                height: 80
            },
            style: {
                stroke: 'green',
                fill: 'transparent'
            }
        }, {
            type: 'rect',
            left: 'center',
            top: 'center',
            shape: {
                width: 80,
                height: 20
            },
            style: {
                stroke: 'green',
                fill: 'transparent'
            }
        }]
    }, {
        type: 'rect',
        id: 'rect2',
        bottom: 0,
        right: 'center',
        shape: {
            width: 50,
            height: 80
        },
        style: {
            stroke: 'green',
            fill: 'transparent'
        }
    }, {
        type: 'group',
        id: 'textGroup1',
        left: '10%',
        top: 'center',
        scale: [1, .5],
        children: [
            {
                type: 'rect',
                z: 100,
                left: 'center',
                top: 'center',
                shape: {
                    width: 170,
                    height: 70
                },
                style: {
                    fill: '#fff',
                    stroke: '#999',
                    lineWidth: 2,
                    shadowBlur: 8,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            },
            {
                type: 'text',
                z: 100,
                top: 'middle',
                left: 'center',
                style: {
                    text: [
                        '横轴表示温度，单位是°C',
                        '纵轴表示高度，单位是km',
                        '右上角有一个图片做的水印'
                    ].join('\n'),
                    font: '12px Microsoft YaHei'
                }
            }
        ]
    }],
    series: [
        {
            name: '高度(km)与气温(°C)变化关系',
            type: 'line',
            data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }
    ]
}

只有第一个 graphic 会生效。

Test group setOption(getOption) mapping.

Test left/right/top/bottom in group.

Test resize.

bounding

replace