echarts可视化树渲染特别慢（开源的的二维绘图引擎）
echarts可视化树渲染特别慢（开源的的二维绘图引擎）通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key value) 的形式修改，否则不会触发图形的重绘。例子：var circle = new zrender.Circle({ shape: { cx: 150 cy: 50 r: 40 } style: { fill: 'none' stroke: '#F00' } }); zr.add(circle); 创建了一个圆心在 [150 50] 位置，半径为 40 像素的圆，并将其添加到画布中。<script src="./dist/zrender.
介绍ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
Github
https://github.com/ecomfe/zrender
安装使用npm install zrender
在使用 ZRender 前，需要在 HTML 中加载对应 JavaScript 文件：
<script src="./dist/zrender.js"></script>
- 初始化 ZRender
在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：
var zr = zrender.init(document.getElementById('main'));
- 在场景中添加元素
ZRender 提供了将近 20 种图形类型，可以在文档 zrender.Displayable 下找到。如果想创建其他图形，也可以通过 zrender.Path.extend 进行扩展。
以创建一个圆为例：
var circle = new zrender.Circle({
shape: {
cx: 150
cy: 50
r: 40
}
style: {
fill: 'none'
stroke: '#F00'
}
});
zr.add(circle);
创建了一个圆心在 [150 50] 位置，半径为 40 像素的圆，并将其添加到画布中。
- 修改图形元素属性
通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key value) 的形式修改，否则不会触发图形的重绘。例子：
var circle = new zrender.Circle({
shape: {
cx: 150
cy: 50
r: 40
}
});
zr.add(circle);
console.log(circle.shape.r); // 40
circle.attr('shape' {
r: 50 // 只更新 r。cx、cy 将保持不变。
});实例代码
<div class="example-container"></div>
<script>
window.onload = function() {
var container = document.getElementsByClassName('example-container')[0];
var zr = zrender.init(container);
var w = zr.getWidth();
var h = zr.getHeight();
var circle = new zrender.Circle({
shape: {
cx: w / 2
cy: h / 2
r: 50
}
style: {
fill: '#FF6EBE'
}
draggable: true
});
var Heart = new zrender.Heart({
shape: {
cx: w / 2 20
cy: h / 2 - 40
width: 60
height: 80
}
draggable: true
});
circle.setClipPath(heart);
zr.add(circle);
var borderA = new zrender.Circle({
shape: {
cx: w / 2
cy: h / 2
r: 50
}
style: {
fill: 'transparent'
stroke: '#5ACFFF'
}
});
zr.add(borderA);
var borderB = new zrender.Heart({
shape: {
cx: w / 2 20
cy: h / 2 - 40
width: 60
height: 80
}
style: {
fill: 'transparent'
stroke: '#5ACFFF'
}
});
zr.add(borderB);
}
</script>
- 效果
截图不清晰可参考官方案例
