想获取更多原创好文，请搜索大众号重视咱们吧~ 本文首发于政采云前端博客：了解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图片示例：
三、参阅文档
- ZRender
- ECharts
引荐阅览
JavaScript中的 this 指向
0根底完成项目自动化布置
uni-app 黑魔法探秘 （一）—— 重写内置标签
前端 DDD 框架 Remesh 的浅析
怎么做一个看板建立系统
开源著作
- 政采云前端小报
开源地址 www.zoo.team/openweekly/ (小报官网首页有微信沟通群)
- 商品挑选 sku 插件
开源地址 github.com/zcy-inc/sku…
招贤纳士
政采云技能团队（Zero），包含前端（ZooTeam）、后端、测试、UED 等，Base 在风景如画的杭州，一个赋有激情和技能匠心精力的成长型团队。政采云前端，隶属于政采云研发部。团队现有 90 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的事务对接之外，还在物料系统、工程平台、建立平台、功用体会、云端使用、数据剖析及可视化等方向进行技能探究和实战，推进并落地了一系列的内部技能产品，持续探究前端技能系统的新鸿沟。
假如你想改动一直被事折腾，期望开始能折腾事；假如你想改动一直被劝诫需求多些想法，却无从破局；假如你想改动你有才能去做成那个结果，却不需求你；假如你想改动你想做成的事需求一个团队去支撑，但没你带人的位置；假如你想改动既定的节奏，将会是“5 年工作时间 3 年工作经验”；假如你想改动本来悟性不错，但总是有那一层窗户纸的含糊… 假如你信任信任的力量，信任平凡人能成就非凡事，信任能遇到更好的自己。假如你期望参与到随着事务腾飞的进程，亲手推进一个有着深化的事务理解、完善的技能系统、技能发明价值、影响力外溢的前端团队的成长进程，我觉得咱们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com
