用 SVG 或 Canvas 渲染

大多数浏览器端图表库使用 SVG 或 Canvas 作为底层渲染器。通常，这两种技术可以互换，并且具有类似的效果。然而，在某些特定场景和情况下，差异可能很明显。因此，始终很难决定使用哪种技术来渲染图表。

从一开始，Canvas 就被用作 ECharts 的渲染器。自 v4.0 起，ECharts 已将 SVG 渲染器作为附加选项提供。初始化图表时，可以将 渲染器参数 指定为 'canvas' 或 'svg'。

SVG 和 Canvas 在使用上存在显着差异。ECharts 中对这两种技术的统一支持归功于底层库 ZRender 的抽象和实现。

如何选择渲染器

一般来说，Canvas 更适合具有大量元素的图表（热力图、地理或平行坐标中的大规模折线图或散点图等），以及具有视觉 效果 的图表。但是，SVG 有一个重要的优点：它具有较少的内存使用量（这对移动设备很重要），并且在放大时不会模糊。

渲染器的选择可以基于硬件和软件环境、数据量和功能要求的组合。

• 在硬件和软件环境良好且数据量不太大的情况下，两种渲染器都可以工作，并且没有必要为它们而烦恼。
• 在环境较差且出现需要优化的性能问题的情况下，可以使用实验来确定使用哪种渲染器。例如，有以下经验。
  • 在必须创建许多 ECharts 实例并且浏览器容易崩溃的情况下（可能是因为 Canvas 的数量导致内存占用超过手机的容量），可以使用 SVG 渲染器进行改进。粗略地说，如果图表在低端 Android 上运行，或者我们使用 LiquidFill 图表 等特定图表，SVG 渲染器可能会工作得更好。
  • 对于较大的数据量（>1k 是一个经验值），始终建议使用 Canvas 渲染器。

我们强烈欢迎 反馈 开发人员的经验和场景，以帮助我们进行更好的优化。

注意：目前，一些特殊效果仍然依赖于 Canvas：例如 尾迹效果、具有混合效果的热力图 等。

自 v5.3.0 起，SVG 渲染器使用虚拟 DOM 进行了重构，性能提升了 2-10 倍，在某些特定场景下甚至可以提升几十倍！更多详情请参阅 #836。

如何使用渲染器

如果按照以下方式完整导入 `echarts`，它会自动导入并注册 SVG 渲染器和 Canvas 渲染器。

import * as echarts from 'echarts';

如果你使用 tree-shakable 导入，则需要手动导入所需的渲染器。

import * as echarts from 'echarts/core';
// You can use only the renderers you need
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';

echarts.use([SVGRenderer, CanvasRenderer]);

然后，你可以在初始化图表时设置 渲染器参数。

// Use the Canvas renderer (default)
var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
// Equivalent to
var chart = echarts.init(containerDom);

// use the SVG renderer
var chart = echarts.init(containerDom, null, { renderer: 'svg' });