前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。
graphic 是原生图形元素组件。可以支持的图形元素包括：
Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置，以及通用事件，接下来会分别介绍每种图形的绘制方法。
一、graphic的通用配置
{ // id 用于在更新图形元素时指定更新哪个图形元素，如果不需要用可以忽略。 id: 'xxx', // 这个字段在第一次设置时不能忽略，取值见上方『支持的图形元素』。 type: 'image', // 下面的各个属性如果不需要设置都可以忽略，忽略则取默认值。 // 指定本次 setOption 对此图形元素进行的操作。默认是 'merge'，还可以 'replace' 或 'remove'。 $action: 'replace', // 这是四个相对于父元素的定位属性，每个属性可取『像素值』或者『百分比』或者 'center'/'middle'。 left: 10, // right: 10, top: 'center', // bottom: '10%', shape: { // 定位、形状相关的设置，如 x, y, cx, cy, width, height, r, points 等。 // 注意，如果设置了 left/right/top/bottom，这里的定位用的 x/y/cx/cy 会失效。 }, style: { // 样式相关的设置，如 fill, stroke, lineWidth, shadowBlur 等。 }, // 表示 z 高度，从而指定了图形元素的覆盖关系。 z: 10, // 表示不响应事件。 silent: true, // 表示节点不显示 invisible: false, // 设置是否整体限制在父节点范围内。可选值：'raw', 'all'。 bouding: 'raw', // 是否可以被拖拽。 draggable: false, // 事件的监听器，还可以是 onmousemove, ondrag 等。支持的事件参见下。 onclick: function () {...}}二、graphic的通用事件
支持这些事件配置： onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop
三、绘制方法
按照形状的类别，把这些分为六类。
1、Image
Image: 图形
Demo:
Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'image', id: 'logo', right: 20, top: 20, z: -10, //'all'：（默认） 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。 这种方式易于使整体都限制在父元素范围中。 //'raw'： 表示仅仅用自身（不包括子节点）的没经过 tranform 的包围盒进行定位。 这种方式易于内容超出父元素范围的定位方式。 bounding: 'raw', origin: [75, 75], style: { image: 'http://echarts.baidu.com/images/favicon.png', width: 150, height: 150, opacity: 0.4 } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};2、Group, Rect, Text
Group: 组，把各个元素都包起来
Rect: 矩形，绘制矩形就是指定宽度，高度
Text: 文案
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, 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 BAR CHART', font: 'bold 26px Microsoft YaHei' } } ] }, { 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: 2, shadowBlur: 8, shadowOffsetX: 3, shadowOffsetY: 3, shadowColor: 'rgba(0,0,0,0.3)' } }, { type: 'text', z: 100, left: 'center', top: 'middle', style: { fill: '#333', text: [ '横轴表示温度，单位是°C', '纵轴表示高度，单位是km', '右上角有一个图片做的水印', '这个文本块可以放在图中各', '种位置' ].join('\n'), font: '14px Microsoft YaHei' } } ] } ], yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};3、Circle, Ring, Sector，Arc
先介绍几个概念：
Circle: 圆形，这个无需多介绍
Ring: 戒指，这里代表双圆
Sector: 扇形，扇形是圆的一部分，扇形是一条弧和经过这条弧两端的两条半径所围成的图形, 是封闭的
Arc: 弧形, 弧形只是一段曲线，不是封闭图形
绘制圆，一般需要知道圆心的坐标，圆的半径就可以，Ring，Sector, Arc 比Circle多了一个属性r0(里圆的半径)
Circle Demo:
Circle Code：
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'circle', id: 'circle', right: 50, top: 20, origin: [75, 75], shape: { cx: 50, cy: 50, r: 50 }, style: { fill: '#fff', stroke: 'red' } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};Ring Demo:
Ring Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'ring', id: 'ring', right: 50, top: 20, origin: [75, 75], shape: { cx: 50, cy: 50, r: 50, r0: 20, }, style: { fill: '#fff', stroke: 'red', lineWidth: 1 } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};Sector Demo:
Sector Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'sector', id: 'sector', right: 50, top: 20, origin: [75, 75], shape: { cx: 50, cy: 50, r: 50, r0: 20, //startAngle: 0, //endAngle: Math.PI * 2, //clockwise: true }, style: { fill: '#fff', stroke: 'red', lineWidth: 1 } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};Arc的shape写法与Sector的写法相似，这里不多介绍了。
4、Polygon, Polyline
Polygon：顾明思议就是多边形
Polyline：也就是多条线，
多边形其实是可以画任意形状，他的shape是一个数组，[[10, 20], [20, 30]..]只要指定好坐标就可以了。Polyline跟Polygon的主要区别就是结尾是否连接起来。
Polygon Demo：
Polygon Code：
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'polygon', id: 'polygon', right: 50, top: 20, origin: [75, 75], shape: { points: [[22, 44], [44, 55], [11, 44], [80, 90]] }, style: { fill: '#fff', stroke: 'red' } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};Polyline Demo:
Polyline Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'polyline', id: 'polyline', right: 50, top: 20, origin: [75, 75], shape: { points: [[22, 44], [44, 55], [11, 44], [80, 90]] }, style: { fill: '#fff', stroke: 'red' } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};5、Line
Line 线，一般绘制一条线，告诉开始坐标，结束坐标就能把线绘制出来。我们看看下面的实例：
Line Demo:
Line Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'line', id: 'line', right: 50, top: 20, origin: [75, 75], shape: { x1: 50, y1: 100, x2: 80, y2: 300 }, style: { fill: '#fff', stroke: 'blue' } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]};6、BezierCurve
BezierCurve: 贝塞尔曲线， Bezier曲线是应用于二维图形的曲线。曲线由顶点和控制点组成，通过改变控制点坐标可以改变曲线的形状。
所以绘制点一般有开始点坐标，结束点坐标，还有控制点坐标。
BezierCurve Demo:
BezierCurve Code:
option = { title: { text: 'Awesome Chart' }, xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, graphic: { type: 'bezierCurve', id: 'bezierCurve', right: 50, top: 20, origin: [75, 75], shape: { x1: 50, x2: 50, y1: 400, y2: 400, cpx1: 60, cpy1: 60, cpx2: 300, cpy2: 300, percent: 80 }, style: { fill: '#fff', stroke: 'blue' } }, yAxis: {}, series: [{ type: 'line', data:[220, 182, 191, 234, 290, 330, 310] }]}; [1]: https://segmentfault.com/a/1190000019667988