扫一扫分享
ZZrender是一个二维绘图引擎,它提供了Canvas,SVG,VML等多种渲染方式,Zrender也是Echarts的渲染器。
初始化zrender对象:
var main = document.getElementById('main');
// 初始化zrender
var zr = zrender.init(main);
一个简单的例子,显示一个圆:
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 300,
r: 40
},
style: {
fill: 'none',
stroke: '#F00'
}
});
zr.add(circle);
我们还可以动态的改变圆的大小:
window.onload = function(){
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 300,
r: 40
},
style: {
fill: 'none',
stroke: '#F00'
}
});
zr.add(circle);
document.getElementById("changeBtn").onclick = function(){
circle.attr('shape',{
r:parseFloat(document.getElementById("r_input").value)
});
}
}
手机预览