前面的文章介绍了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
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
