echarts graphic为图表添加图形等元素

1、配置
	   option={ 
	   		...,
		    graphic: {
		        type: 'image',
		        ...
		    }
	    }
	支持添加的类型有:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

2、多个图形以及嵌套容器
	    graphic: [
	        { 
	            type: 'image',
	            ...
	        },
	        { 
	            type: 'text',
	            id: 'text1',
	            ...
	        },
	        {
	            type: 'group',	容器可以整体移动内部元素,且内部元素的定位也是从所在的父容器开始
	            children: [
	                {
	                    type: 'rect',
	                    id: 'rect1',
	                    ...
	                },
	                {
	                    type: 'image',
	                    ...
	                },
	                ...
	            ]
	        }
	        ...
	    ]

3、基本配置项
	{
	    id: 'xxx',	用于在更新图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
	    type: 'image',	图形元素
	    $action: 'replace',	默认是'merge',还可以'replace'或'remove'。
	    	'merge'：如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。
			'replace'：如果已有元素,新建元素替代之。
			'remove'：删除元素。
	    shape: {
	        定位、形状相关的设置，如 x, y, cx, cy, width, height, r, points等。
	        注意,如果设置了left/right/top/bottom,这里的定位用的x/y/cx/cy会失效。
	    },
	    style: {
	        样式相关的设置,如 fill, stroke, lineWidth, shadowBlur 等。
	    },
	    z: 10,	表示z高度,从而指定了图形元素的覆盖关系。
	    silent: true,	表示不响应事件。
	    invisible: false,	表示节点不显示
	    bouding: 'raw',	设置是否整体限制在父节点范围内。可选值：'raw', 'all'。
			'all':表示用自身以及子节点整体的经过transform后的包围盒进行定位,这种方式易于使整体都限制在父元素范围中。
			'raw':表示仅仅用自身(不包括子节点)的没经过tranform的包围盒进行定位,这种方式易于内容超出父元素范围的定位方式。
	    draggable: false,	是否可以被拖拽。
	    onclick: function () {...}
	    ...
	}
	
4、删除或更换(替代)已有的图形元素
	myChart.setOption({
	    ...,
	    graphic: [
	        { 
	            id: 'text1',
	            $action: 'remove',	删除上例中定义的 'text1' 元素。
	            ...
	        },
	        { 
	            id: 'rect1',
	            $action: 'replace',	将上例中定义的'rect1'元素换成 circle,即使'rect1'在一个group中,但这里并不需要顾忌层级,用id指定就可以了。
	            type: 'circle',
	            ...
	        }
	    ]
	});

代码示例:

option = {
    legend: {
        data:['高度(km)与气温(°C)变化关系']
    },
    tooltip: {
        trigger: 'axis',
        formatter: "Temperature : <br/>{b}km : {c}°C"
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    yAxis: {
        type: 'category',
        axisLine: {onZero: false},
        axisLabel: {
            formatter: '{value} km'
        },
        boundaryGap: true,
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    },
    graphic: [
        {
            type: 'group',
            rotation: Math.PI / 4,
            bounding: 'raw',
            right: 110,
            bottom: 110,
            z: 100,
            children: [
                {
                    type: 'rect',
                    left: 'center',
                    top: 'center',
                    z: 100,
                    shape: {
                        width: 400,
                        height: 50
                    },
                    style: {
                        fill: 'rgba(0,0,0,0.3)'
                    }
                },
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    z: 100,
                    style: {
                        fill: '#fff',
                        text: 'ECHARTS LINE CHART',
                        font: 'bold 26px sans-serif'
                    }
                }
            ]
        },
        {
            type: 'group',
            left: '10%',
            top: 'center',
            children: [
                {
                    type: 'rect',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    shape: {
                        width: 190,
                        height: 90
                    },
                    style: {
                        fill: '#fff',
                        stroke: '#555',
                        lineWidth: 1,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.2)'
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        fill: '#333',
                        text: [
                            '横轴表示温度，单位是 °C',
                            '纵轴表示高度，单位是 km',
                            '右上角有一个图片做的水印',
                            '这个文本块可以放在图中各',
                            '种位置'
                        ].join('\n'),
                        font: '14px Microsoft YaHei'
                    }
                }
            ]
        }
    ],
    series: [
        {
            name: '高度(km)与气温(°C)变化关系',
            type: 'line',
            smooth: true,
            barCategoryGap: 25,
            data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }
    ]
};