想获取更多原创好文,请搜索公众号关注我们吧~ 本文首发于政采云前端博客:了解ZRender
前言
ZRender 是二维绘图引擎,是轻量级的 Canvas 类库,它提供 Canvas、SVG、VML 等多种渲染方式,它可以用于绘制各种图形,包括线条、矩形、圆形、多边形等。ZRender 也是 ECharts 的渲染器。在ZRender的基础上开发的专门用于可视化数据的库,它提供了很多预定义的图表类型,如折线图、柱状图、散点图、饼图等,同时还支持动态更新数据和交互事件。
一、ZRender
1. ZRender 的特性
ZRender 提供了以下主要特性:
- 轻量级:ZRender 是一个轻量级的绘图库,它的代码大小只有 100KB 左右,可以快速地加载并运行。
- 高性能:ZRender 可以在大规模数据的情况下保持高性能,能够支持高速绘制大量的图形元素。
- 易扩展:ZRender 提供了一系列的扩展机制,可以方便地添加新的图形元素、渲染器和事件处理器等。
- 多种图形元素支持:ZRender 支持多种图形元素,包括线段、矩形、圆形、文本、图片、路径等,可以满足各种绘图需求。
- 多种渲染器支持:ZRender 支持多种渲染器,包括 Canvas 渲染器、SVG 渲染器和 WebGL 渲染器等。
- 丰富的事件处理机制:ZRender 提供了丰富的事件处理机制,可以方便地处理用户交互事件,包括鼠标点击、鼠标移动、键盘事件等。
ZRender 的优势 相比于其他绘图库,ZRender 具有以下优势:
- 性能优越:ZRender 能够快速地绘制大量的图形元素,具有较高的性能,可以满足大规模数据的绘图需求。
- 扩展性强:ZRender 提供了丰富的扩展机制,可以方便地添加新的图形元素、渲染器和事件处理器等,具有很强的灵活性。
- 使用方便:ZRender 的 API 简单易懂,使用方便,可以快速上手。
- 跨平台支持:ZRender 支持多种渲染器,可以在不同的平台上运行,具有很好的跨平台支持性。
2. 基本用法
2.1 安装 ZRender
npm install zrender --save
2.2 创建画布
在这个例子中,我们创建了一个 div 元素,并将其添加到页面中。然后使用 ZRender 的 init 方法初始化画布,将其赋值给变量 zr。
const canvas = document.createElement('div');
document.body.appendChild(canvas);
const zr = zrender.init(canvas);
2.3 绘制图形
ZRender 可以绘制各种图形,例如矩形、圆形、文本等。在这个例子中,我们创建了一个矩形对象,设置其坐标、宽度、高度和填充颜色,并通过 zr.add 方法将其添加到画布中。下面是绘制一个矩形的代码示例:
const rect = new zrender.Rect({
shape: {
x: 100,
y: 100,
width: 400,
height:300,
},
style: {
fill: "green",
stroke: 'black',
lineWidth:3
}
});
zr.add(rect);
2.4 修改图形元素属性
const rect = new zrender.Rect({
shape: {
x: 100,
y: 100,
width: 400,
height:300,
},
style: {
fill: "green",
stroke: 'black',
lineWidth:5
}
});
zr.add(rect);
console.log(rect.shape.width); // 400
rect.attr('shape', {
width: 50 // 只更新 width。其余将保持不变。对于组或者整个zrender对象重绘调用dirty()方法触发
});
2.5 实现交互效果
ZRender 提供了事件系统,可以方便地实现交互效果。在这个例子中,我们为矩形添加了一个点击事件,在点击矩形时会打印出一条消息。例如,我们可以为矩形添加点击事件:
const rect = new zrender.Rect({
shape: {
x: 100,
y: 100,
width: 400,
height:300,
},
style: {
fill: "green",
stroke: 'black',
lineWidth:5
}
});
rect.on('click', () => { //.off()取消绑定事件
console.log('rect clicked');
});
zr.add(rect);
2.6 绘制柱状图
const zr = zrender.init(chartRef.current);
const rectWidth = 30;
const rectGap = 10;
const rectCount = data.length;
const maxData = Math.max(...data);
const rectHeight = 200;
for (let i = 0; i < rectCount; i++) {
const rect = new zrender.Rect({
shape: {
x: i * (rectWidth + rectGap),
y: rectHeight - data[i] / maxData * rectHeight,
width: rectWidth,
height: data[i] / maxData * rectHeight,
},
style: {
fill: '#66ccff',
stroke: 'black',
lineWidth:5
},
});
zr.add(rect);
}
在这个例子中,我们创建了一个 柱状图组件,它接收一个数据数组作为 props。在组件中,我们使用 useRef 创建一个 ref,用来保存画布的 DOM 元素。然后在 useEffect 中,我们使用 ZRender 创建画布,并根据传入的数据绘制矩形。最后将画布添加到 DOM 中。在组件的返回值中,我们将 ref 绑定到一个 div 元素上,并设置其宽度和高度。这样就可以在页面中显示出柱状图了。
3. 使用场景
由于 ZRender 是 ECharts 的底层引擎,因此在使用 ECharts 的时候,ZRender 是自动加载的,用户无需额外操作。不过,有些情况下可能需要直接使用 ZRender 来绘制图形或实现交互功能。
代码示例:
const zr = zrender.init(chartRef.current);
const myChart = echarts.init(zr);
myChart.setOption({
backgroundColor: 'rgba(0,0,0, .6)',
xAxis: {
type: 'category',
boundaryGap: ['0', '10%'],
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
},
yAxis: {
type: 'value',
boundaryGap: ['0', '10%'],
axisTick: { show: false },
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
},
series: [
{
name: '2021年',
type: 'bar',
barWidth: '25%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(207, 102, 114, 1)'
},
{
offset: 1,
color: 'rgba(142, 194, 31, 1)'
}
],
false
)
},
data: [103456, 120056, 123006, 123400, 120450, 103056]
}
]
)}
zr.dispose();
在这个例子中,我们创建了一个渐变柱状图组件,它接收一个数据数组作为 props。在组件中,我们使用 useRef 创建一个 ref,用来保存画布的 DOM 元素。然后在 useEffect 中,我们使用 ZRender 创建画布,并将画布实例传给 ECharts 的初始化函数,创建一个 ECharts 实例。在 ECharts 实例中,我们使用 setOption 方法来设置图表的配置选项,其中包括 X 轴、Y 轴和柱状图数据等内容。在组件的返回值中,我们将 ref 绑定到一个 div 元素上,并设置其宽度和高度。这样就可以在页面中显示出柱状图。在组件销毁时,我们还需要调用 ECharts 和 ZRender 实例的 dispose 方法,以释放资源。这样可以避免内存泄漏的问题。
以下是一些 ZRender 和 ECharts 交叉使用场景:
-
高性能的绘图需求
由于 ECharts 负责绘制的图表组件比较多,每个组件都要进行计算和渲染,因此对于某些特别复杂的图表,ECharts 可能会出现性能问题。这时可以使用 ZRender 直接绘制图形,通过优化性能实现更好的效果。
-
自定义图形和交互效果
ECharts 封装了很多图表组件和交互功能,但是某些时候用户可能需要自定义图形或交互效果。这时可以使用 ZRender 直接在 ECharts 图表上添加自定义的图形或交互效果,以实现特定的需求。
-
与其他第三方库的集成
有些时候,用户可能需要将 ECharts 图表嵌入到其他第三方库中,或者在其他第三方库中实现与 ECharts 图表的交互。这时可以使用 ZRender 直接操作图形元素,以实现与其他库的集成。
总的来说,ZRender 和 ECharts 可以在很多场景下交叉使用,提供更加丰富和灵活的前端可视化方案。
二、Echarts
1. Echarts的特性
- 多种图表类型:ECharts支持多种常见的图表类型,包括折线图、柱状图、饼图、散点图、地图等。
- 强大的交互性:ECharts提供了多种交互方式,包括缩放、拖拽、选取、联动等。
- 支持多种数据格式:ECharts支持常见的数据格式,包括JSON、数组等。
- 可定制性:ECharts支持多种样式定制方式,包括全局样式、主题、数据项样式等。
- 数据视觉化处理:ECharts提供多种数据视觉化处理方式,包括数据映射、渐变色等。
- 跨平台:ECharts可以运行在各种浏览器、操作系统和移动设备上。
- 社区活跃:ECharts有一个活跃的社区,用户可以从社区中获取技术支持和资源。
2. demo图片示例
echarts的官方示例已经很完善,此处暂时只贴一些个人比较感兴趣的练习demo图片示例:
三、参考文档
推荐阅读
开源作品
- 政采云前端小报
开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)
- 商品选择 sku 插件
招贤纳士
政采云技术团队(Zero),包含前端(ZooTeam)、后端、测试、UED 等,Base 在风景如画的杭州,一个富有激情和技术匠心精神的成长型团队。政采云前端,隶属于政采云研发部。团队现有 90 余个前端小伙伴,平均年龄 27 岁,近 3 成是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外,还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战,推动并落地了一系列的内部技术产品,持续探索前端技术体系的新边界。
如果你想改变一直被事折腾,希望开始能折腾事;如果你想改变一直被告诫需要多些想法,却无从破局;如果你想改变你有能力去做成那个结果,却不需要你;如果你想改变你想做成的事需要一个团队去支撑,但没你带人的位置;如果你想改变既定的节奏,将会是“5 年工作时间 3 年工作经验”;如果你想改变本来悟性不错,但总是有那一层窗户纸的模糊… 如果你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程,亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程,我觉得我们该聊聊。任何时间,等着你写点什么,发给 ZooTeam@cai-inc.com