Echarts：渲染成Canvas还是SVG，该如何抉择？

ECharts 从初始一直使用 Canvas 绘制图表。而 ECharts v4.0 发布了 SVG 渲染器，从而提供了一种新的选择。在初始化图表实例时，只需设置 renderer 参数 为 'canvas' 或 'svg' 即可指定渲染器，比较方便。贝格前端工场带领大家看下如何选择。

一、Canvas和SVG的区分

Canvas和SVG都是用于在网页上绘制图形的技术，如果你了解位图和矢量图的区别，就很容易了解二者区分，但它们有一些重要的区别：

1. 绘图方式：

- Canvas：使用JavaScript绘制图形，它是一个位图绘图技术，通过在画布上绘制像素来创建图形。

- SVG：使用XML标记语言描述图形，它是基于矢量的绘图技术，通过描述图形的路径、形状和属性来创建图形。

2. 图形质量：

- Canvas：由于是位图绘图技术，当图形放大时会失真，因此在放大时可能会出现模糊或锯齿状的边缘。

- SVG：基于矢量的绘图技术，图形可以无损放大，因此在放大时保持较好的质量。

3. 缩放和变换：

- Canvas：缩放和变换需要手动计算和处理，较为复杂。

- SVG：支持内置的缩放、平移和旋转功能，可以更方便地进行图形变换和交互。

4. 事件处理：

- Canvas：需要手动处理鼠标事件和交互，如点击、拖动等。

- SVG：图形元素可以直接绑定事件处理程序，因此在交互性方面更加方便。

综上所述，Canvas适合处理大量的动态图形和游戏等场景，而SVG则更适合静态图形、图表和需要放大缩小的场景。在选择使用Canvas还是SVG时，需要根据具体的需求和场景来进行权衡。

---

二、渲染器的选择

一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 特效。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊

选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。

• 在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。
• 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：

在需要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略的说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图 等，SVG 渲染器可能效果更好。

数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。

---

三、如何使用渲染器

如果是用如下的方式完整引入echarts，代码中已经包含了 SVG 渲染器和 Canvas 渲染器

import * as echarts from 'echarts';

如果你是按照 在项目中引入 Apache ECharts 一文中的介绍使用按需引入，则需要手动引入需要的渲染器

import * as echarts from 'echarts/core';
// 可以根据需要选用只用到的渲染器
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';

echarts.use([SVGRenderer, CanvasRenderer]);

然后，我们就可以在代码中，初始化图表实例时，传入参数 选择渲染器类型：

// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
// 等价于：
var chart = echarts.init(containerDom);

// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, { renderer: 'svg' });

在echarts中，可以通过配置项来选择使用渲染器。具体来说，可以通过设置renderer属性来指定使用SVG或Canvas进行渲染。

// 使用SVG渲染
option = {
    renderer: 'svg',
    // 其他配置项
};

// 使用Canvas渲染（默认）
option = {
    // 其他配置项
};

通过在echarts的配置项中设置renderer属性为'svg'或'canvas'，可以指定echarts使用相应的渲染器进行图表渲染。这样可以根据具体需求来选择使用SVG或Canvas渲染。

Hi，我是贝格前端工场，10年前端和UI老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、有事请私信。