前言
ZRender 是二维绘图引擎，是轻量级的 Canvas 类库，它提供 Canvas、SVG、VML 等多种渲染方式，它可以用于绘制各种图形，包括线条、矩形、圆形、多边形等。ZRender 也是 ECharts 的渲染器。在ZRender的基础上开发的专门用于可视化数据的库，它提供了很多预定义的图表类型，如折线图、柱状图、散点图、饼图等，同时还支持动态更新数据和交互事件。
一、基本用法
1. 安装 ZRender
npm install zrender --save
2. 创建画布
在这个例子中，我们创建了一个 div 元素，并将其添加到页面中。然后使用 ZRender 的 init 方法初始化画布，将其赋值给变量 zr。
import zrender from 'zrender';
const canvas = document.createElement('div');
document.body.appendChild(canvas);
const zr = zrender.init(canvas);
3. 绘制图形
ZRender 可以绘制各种图形，例如矩形、圆形、文本等。在这个例子中，我们创建了一个矩形对象，设置其坐标、宽度、高度和填充颜色，并通过 zr.add 方法将其添加到画布中。下面是绘制一个矩形的代码示例：
import zrender from 'zrender';
// 堆代码 duidaima.com
const rect = new zrender.Rect({
shape: {
x: 100,
y: 100,
width: 400,
height:300,
},
style: {
fill: "green",
stroke: 'black',
lineWidth:5
}
});
zr.add(rect);
4. 修改图形元素属性
import zrender from 'zrender';
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
circle.attr('shape', {
width: 50 // 只更新 width。其余将保持不变。对于组或者整个zrender对象重绘调用dirty()方法触发
});
5. 实现交互效果
ZRender 提供了事件系统，可以方便地实现交互效果。在这个例子中，我们为矩形添加了一个点击事件，在点击矩形时会打印出一条消息。例如，我们可以为矩形添加点击事件：
import zrender from '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);
二、代码示例
import React, { useRef, useEffect } from 'react';
import zrender from 'zrender';
// 堆代码 duidaima.com
const BarChart = ({ data }) => {
const chartRef = useRef(null);
useEffect(() => {
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',
},
});
zr.add(rect);
}
}, [data]);
return (
<div ref={chartRef} style={{ width: '100%', height: '300px' }} />
);
};
export default BarChart;
在这个例子中，我们创建了一个 BarChart 组件，它接收一个数据数组作为 props。在组件中，我们使用 useRef 创建一个 ref，用来保存画布的 DOM 元素。然后在 useEffect 中，我们使用 ZRender 创建画布，并根据传入的数据绘制矩形。最后将画布添加到 DOM 中。在组件的返回值中，我们将 ref 绑定到一个 div 元素上，并设置其宽度和高度。这样就可以在页面中显示出柱状图了。
三、使用场景
由于 ZRender 是 ECharts 的底层引擎，因此在使用 ECharts 的时候，ZRender 是自动加载的，用户无需额外操作。不过，有些情况下可能需要直接使用 ZRender 来绘制图形或实现交互功能。
代码示例：
import React, { useRef, useEffect } from 'react';
import echarts from 'echarts';
import zrender from 'zrender';
const BarChart = ({ data }) => {
const chartRef = useRef(null);
useEffect(() => {
const zr = zrender.init(chartRef.current);
const myChart = echarts.init(zr);
myChart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: data,
itemStyle: {
color: '#66ccff',
},
},
]
});
return () => {
myChart.dispose();
zr.dispose();
};
}, [data]);
return (
<div ref={chartRef} style={{ width: '100%', height: '300px' }} />
);
};
export default BarChart;
在这个例子中，我们创建了一个 BarChart 组件，它接收一个数据数组作为 props。在组件中，我们使用 useRef 创建一个 ref，用来保存画布的 DOM 元素。然后在 useEffect 中，我们使用 ZRender 创建画布，并将画布实例传给 ECharts 的初始化函数，以创建一个 ECharts 实例。在 ECharts 实例中，我们使用 setOption 方法来设置图表的配置选项，其中包括 X 轴、Y 轴和柱状图数据等内容。这样就可以在页面中显示出柱状图了。在组件的返回值中，我们将 ref 绑定到一个 div 元素上，并设置其宽度和高度。这样就可以在页面中显示出柱状图了。在组件销毁时，我们还需要调用 ECharts 和 ZRender 实例的 dispose 方法，以释放资源。这样可以避免内存泄漏的问题。
以下是一些 ZRender 和 ECharts 交叉使用场景：
1.自定义图形和交互效果
ECharts 封装了很多图表组件和交互功能，但是某些时候用户可能需要自定义图形或交互效果。这时可以使用 ZRender 直接在 ECharts 图表上添加自定义的图形或交互效果，以实现特定的需求。
代码示例：
import React, { useRef, useEffect } from 'react';
import echarts from 'echarts';
import zrender from 'zrender';
// 堆代码 duidaima.com
const AnimatedChart = ({ data }) => {
const chartRef = useRef(null);
useEffect(() => {
const zr = zrender.init(chartRef.current);
const myChart = echarts.init(zr);
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: data,
itemStyle: {
color: '#66ccff',
},
animationDuration: 2000,
animationEasing: 'cubicOut',
},
],
};
myChart.setOption(option);
// 给折线图添加动画
const lineSeries = myChart.getOption().series[0];
const linePath = zr.storage.get(lineSeries.__zr).shape.paths[0];
const lineLength = linePath.length();
linePath.offsetLength = lineLength;
lineSeries.__linePath = linePath;
lineSeries.__lineLength = lineLength;
zr.animation.animate(lineSeries.__zr, '', 0, lineLength, 2000, function () {
linePath.offsetLength = this.value;
lineSeries.__dirtyPath = true;
myChart.getZr().refreshImmediately();
});
return () => {
myChart.dispose();
zr.dispose();
};
}, [data]);
return (
<div ref={chartRef} style={{ width: '100%', height: '300px' }} />
);
};
export default AnimatedChart;
在这个例子中，我们创建了一个 AnimatedChart 组件，它接收一个数据数组作为 props。在组件中，我们使用 useRef 创建一个 ref，用来保存画布的 DOM 元素。然后在 useEffect 中，我们使用 ZRender 创建画布，并将画布实例传给 ECharts 的初始化函数，以创建一个 ECharts 实例。在 ECharts 实例中，我们使用 setOption 方法来设置图表的配置选项，其中包括 X 轴、Y 轴、折线图数据和动画配置等内容。这样就可以在页面中显示出折线图，并实现动画效果。接着，我们从 ECharts 实例中获取折线图系列，并通过 ZRender 的 storage API 获取折线图的路径对象。我们计算出路径的总长度，然后通过 ZRender 的 animation API 添加一个动画效果，从 0 移动到路径的总长度。在动画过程中，我们不断更新路径的 offsetLength 属性，以显示出折线图逐渐绘制出来的效果。在组件的返回值中，我们将 ref 绑定到一个 div 元素上，并设置其宽度和高度。这样就可以在页面中显示出折线图了。在组件销毁时，我们还需要调用 ECharts 和 ZRender 实例的 dispose 方法，以释放资源。这样可以避免内存泄漏的问题。
2.高性能的绘图需求
由于 ECharts 负责绘制的图表组件比较多，每个组件都要进行计算和渲染，因此对于某些特别复杂的图表，ECharts 可能会出现性能问题。这时可以使用 ZRender 直接绘制图形，通过优化性能实现更好的效果。
3.与其他第三方库的集成
有些时候，用户可能需要将 ECharts 图表嵌入到其他第三方库中，或者在其他第三方库中实现与 ECharts 图表的交互。这时可以使用 ZRender 直接操作图形元素，以实现与其他库的集成。
总的来说，ZRender 和 ECharts 可以在很多场景下交叉使用，提供更加丰富和灵活的前端可视化方案。
闽公网安备 35020302035485号
