ZZrender是一个二维绘图引擎，它提供了Canvas，SVG，VML等多种渲染方式，Zrender也是Echarts的渲染器。

zrender.js使用

<script src="dist/zrender.js"></script>

初始化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)  
        });  
    }  
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/2911