ECharts官方教程(十四)【使用 Canvas 或者 SVG 渲染】

最新推荐文章于 2025-02-25 16:14:15 发布

.NET跨平台

最新推荐文章于 2025-02-25 16:14:15 发布

阅读量2.2w

点赞数 3

分类专栏： ECharts.js | Highcharts.js

ECharts.js | Highcharts.js 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了ECharts中SVG和Canvas渲染器的选择与应用。SVG渲染器在移动端具有内存占用低、渲染性能高的优势，适合中等数据量的图表。而Canvas渲染器则适用于大数据量和复杂交互的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Canvas 或者 SVG 渲染

浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。

ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v3.8 发布了 SVG 渲染器（beta 版），从而提供了一种新的选择。只须在初始化一个图表实例时，设置 renderer 参数为 ‘canvas’ 或 ‘svg’ 即可指定渲染器，比较方便。

SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。

选择哪种渲染器

一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：

上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。

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

在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。
在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
    在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图 等，SVG 渲染器可能效果更好。
    数据量很大、较多交互时，可以选用 Canvas 渲染器。

我们强烈欢迎开发者们反馈给我们使用的体验和场景，帮助我们更好的做优化。

注：目前的 SVG beta 版中，富文本、阴影、材质功能尚未实现。

如何使用渲染器

ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。

ECharts 的 预构建文件 中，常用版 和 完整版 已经包含了 SVG 渲染器，可直接使用。而 精简版 没有包括。
如果 在线自定义构建 ECharts，则需要勾上页面下方的 “SVG 渲染”。
如果 线下自定义构建 ECharts，则须引入 SVG 渲染器模块，即：

import 'zrender/lib/svg/svg';

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

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

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