zrender 是二維繪圖引擎，它提供了canvas,svg，vml等多種渲染方式，zrender也是echarts的渲染器
繪圖流程：
1.引入zrender.js
2.編寫一個div容器
3.初始化zrender對象
4.初始化zrender的繪圖對象
5.調用zrender的add方法進行繪圖
效果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/zrender.js"></script>
</head>
<body>
<div id="container" style="width:800px;height:800px;"></div>
</body>
<script>
var zr = zrender.init(document.getElementById('container'));
var rect = new zrender.Rect({
shape:{
x:0,
y:0,
width:50,
height:50
},
style:{
fill:'red',
lineWidth:0
}
});
var line = new zrender.Polyline({
shape:{
points:[
[100,100],
[200,75],
[300,100]
]
},
style:{
stroke:"blue",
lineWidth:1
}
});
var circle = new zrender.Circle({
shape:{
cx:200,
cy:200,
r:50
},
style:{
fill:"red",
stroke:'green',
lineWidth:2
}
})
zr.add(rect);
zr.add(line);
zr.add(circle);
</script>
</html>