了解 ZRender 和 Echarts

了解 ZRender 和 Echarts

想获取更多原创好文，请搜索大众号重视咱们吧~ 本文首发于政采云前端博客：了解ZRender

前言

ZRender 是二维绘图引擎，是轻量级的 Canvas 类库，它供给 Canvas、SVG、VML 等多种渲染方法，它能够用于制作各种图形，包含线条、矩形、圆形、多边形等。ZRender 也是 ECharts 的渲染器。在ZRender的根底上开发的专门用于可视化数据的库，它供给了许多预定义的图表类型，如折线图、柱状图、散点图、饼图等，一起还支撑动态更新数据和交互事情。

一、ZRender

1. ZRender 的特性

ZRender 供给了以下主要特性：

  1. 轻量级：ZRender 是一个轻量级的绘图库，它的代码巨细只要 100KB 左右，能够快速地加载并运行。
  2. 高功用：ZRender 能够在大规模数据的情况下坚持高功用，能够支撑高速制作许多的图形元素。
  3. 易扩展：ZRender 供给了一系列的扩展机制，能够方便地增加新的图形元素、渲染器和事情处理器等。
  4. 多种图形元素支撑：ZRender 支撑多种图形元素，包含线段、矩形、圆形、文本、图片、途径等，能够满意各种绘图需求。
  5. 多种渲染器支撑：ZRender 支撑多种渲染器，包含 Canvas 渲染器、SVG 渲染器和 WebGL 渲染器等。
  6. 丰厚的事情处理机制：ZRender 供给了丰厚的事情处理机制，能够方便地处理用户交互事情，包含鼠标点击、鼠标移动、键盘事情等。

ZRender 的优势 比较于其他绘图库，ZRender 具有以下优势：

  1. 功用优越：ZRender 能够快速地制作许多的图形元素，具有较高的功用，能够满意大规模数据的绘图需求。
  2. 扩展性强：ZRender 供给了丰厚的扩展机制，能够方便地增加新的图形元素、渲染器和事情处理器等，具有很强的灵敏性。
  3. 运用方便：ZRender 的 API 简略易懂，运用方便，能够快速上手。
  4. 跨平台支撑：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);

了解 ZRender 和 Echarts

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()办法触发
});

了解 ZRender 和 Echarts

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);

了解 ZRender 和 Echarts

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);
}

了解 ZRender 和 Echarts

在这个比如中，咱们创立了一个 柱状图组件，它接纳一个数据数组作为 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();

了解 ZRender 和 Echarts

在这个比如中，咱们创立了一个突变柱状图组件，它接纳一个数据数组作为 props。在组件中，咱们运用 useRef 创立一个 ref，用来保存画布的 DOM 元素。然后在 useEffect 中，咱们运用 ZRender 创立画布，并将画布实例传给 ECharts 的初始化函数，创立一个 ECharts 实例。在 ECharts 实例中，咱们运用 setOption 办法来设置图表的配置选项，其间包含 X 轴、Y 轴和柱状图数据等内容。在组件的返回值中，咱们将 ref 绑定到一个 div 元素上，并设置其宽度和高度。这样就能够在页面中显示出柱状图。在组件毁掉时，咱们还需求调用 ECharts 和 ZRender 实例的 dispose 办法，以开释资源。这样能够避免内存泄漏的问题。

以下是一些 ZRender 和 ECharts 交叉运用场景：

  1. 高功用的绘图需求

    因为 ECharts 担任制作的图表组件比较多，每个组件都要进行核算和渲染，因而关于某些特别杂乱的图表，ECharts 可能会呈现功用问题。这时能够运用 ZRender 直接制作图形，经过优化功用完成更好的作用。

  2. 自定义图形和交互作用

    ECharts 封装了许多图表组件和交互功用，可是某些时分用户可能需求自定义图形或交互作用。这时能够运用 ZRender 直接在 ECharts 图表上增加自定义的图形或交互作用，以完成特定的需求。

  3. 与其他第三方库的集成

    有些时分，用户可能需求将 ECharts 图表嵌入到其他第三方库中，或许在其他第三方库中完成与 ECharts 图表的交互。这时能够运用 ZRender 直接操作图形元素，以完成与其他库的集成。

总的来说，ZRender 和 ECharts 能够在许多场景下交叉运用，供给愈加丰厚和灵敏的前端可视化方案。

二、Echarts

1. Echarts的特性

  1. 多种图表类型：ECharts支撑多种常见的图表类型，包含折线图、柱状图、饼图、散点图、地图等。
  2. 强壮的交互性：ECharts供给了多种交互方法，包含缩放、拖拽、选取、联动等。
  3. 支撑多种数据格式：ECharts支撑常见的数据格式，包含JSON、数组等。
  4. 可定制性：ECharts支撑多种款式定制方法，包含全局款式、主题、数据项款式等。
  5. 数据视觉化处理：ECharts供给多种数据视觉化处理方法，包含数据映射、突变色等。
  6. 跨平台：ECharts能够运行在各种浏览器、操作系统和移动设备上。
  7. 社区活泼：ECharts有一个活泼的社区，用户能够从社区中获取技能支撑和资源。

2. demo图片示例

echarts的官方示例现已很完善，此处暂时只贴一些个人比较感兴趣的练习demo图片示例：

了解 ZRender 和 Echarts

了解 ZRender 和 Echarts

了解 ZRender 和 Echarts

了解 ZRender 和 Echarts

了解 ZRender 和 Echarts

三、参阅文档

  • 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

了解 ZRender 和 Echarts