### Test group setOption(getOption) mapping.

### Test left/right/top/bottom in group.

### Test resize.

{ 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: '蓝色矩形应与橙色矩形同一位置' } }] } { graphic: [{ id: 'img', left: 'center', top: 'middle' }] }

### bounding

{ 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] } ] }

### replace

{ graphic: { type: 'circle', shape: { cx: 50, cy: 50, r: 20, }, style: { fill: 'green', stroke: 'pink', lineWidth: 3 } } } { graphic: { type: 'rect', $action: 'replace', shape: { x: 50, y: 50, width: 20, height: 60 }, style: { fill: 'green', stroke: 'pink', lineWidth: 3 } } }
只有第一个 graphic 会生效。 { graphic: [{ elements: [{ type: 'circle', shape: { cx: 50, cy: 50, r: 20, } }, { type: 'circle', shape: { cx: 150, cy: 150, r: 20, } }] }, { elements: [{ type: 'circle', shape: { cx: 100, cy: 100, r: 20, } }] }] }
{ graphic: [{ type: 'rect', shape: { x: 50, y: 50, width: 20, height: 80 }, style: { fill: 'green', stroke: 'pink', lineWidth: 3 } }, { type: 'ring', shape: { cx: 150, cy: 150, r: 20, r0: 5 }, style: { fill: 'green', stroke: 'pink', lineWidth: 3 } }] }
{ graphic: [{ type: 'text', style: { text: 'asdf哈呵', font: '40px sans-serif', x: 100, y: 40 } }, { id: 'rrr', type: 'ring', shape: { cx: 50, cy: 150, r: 20, r0: 5 } }, { id: 'xxx', type: 'rect', shape: { x: 250, y: 50, width: 20, height: 80 } }] }
{ xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }], graphic: [{ type: 'text', style: { text: 'asdf哈呵', font: '40px sans-serif', x: 100, y: 40 } }, { id: 'rrr', type: 'ring', shape: { cx: 50, cy: 150, r: 20, r0: 5 } }, { type: 'rect', shape: { x: 250, y: 50, width: 20, height: 80 } }, { type: 'group', children: [{ id: 'ing', type: 'rect', shape: { x: 30, y: 30, width: 10, height: 20 }, style: { fill: 'yellow' } }] }] } { graphic: [{ style: { font: '60px sans-serif', x: 200 }, z: 222 }, { shape: { cx: 150 }, style: { fill: 'green' }, z: 222 }, { shape: { x: 350 }, z: 222 }, { id: 'ing', style: { fill: 'pink' }, z: 222 }] }