使用 SVG 还是 Canvas 渲染
大多数浏览器端的图表库都使用 SVG 或者 Canvas 作为底层的渲染器。通常，这两种技术是可以互换的，并且效果类似。但是在一些特定场景和案例中，差异可能会很明显。因此，决定使用哪种技术来渲染图表一直是一个艰难的选择。
ECharts 从一开始就使用 Canvas 作为渲染器。自 v4.0 版本起，ECharts 提供了 SVG 渲染器作为附加选项。你可以在初始化图表时，将 renderer 参数指定为 'canvas' 或 'svg'。
SVG 和 Canvas 在使用上有显著的差异。ECharts 之所以能统一支持这两种技术，得益于底层库 ZRender 的抽象和实现。
如何选择渲染器
通常来说，Canvas 更适用于元素数量非常多的图表（如地理坐标系或平行坐标系中的热力图、大规模的折线图或散点图等），以及带有视觉特效的图表。然而，SVG 有一个重要的优势：它的内存占用更小（这对于移动设备很重要），并且在放大时不会模糊。
渲染器的选择可以基于软硬件环境、数据量和功能需求的综合考量。
- 在软硬件环境较好、数据量不大的场景下，两种渲染器都能胜任，无需过多纠结。
- 在环境较差、出现性能问题需要优化时，可以通过实验来确定使用哪种渲染器。例如，有以下这些经验。
- 在需要创建许多 ECharts 实例且浏览器容易崩溃的情况下（可能是因为 Canvas 数量过多导致内存占用超出手机容量），可以使用 SVG 渲染器来改善。粗略地说，如果图表运行在低端安卓设备上，或者我们使用一些特定的图表，例如水球图，SVG 渲染器可能会表现得更好。
- 对于数据量较大（经验值为大于 1k）的情况，总是推荐使用 Canvas 渲染器。
我们非常欢迎开发者们反馈他们的使用经验和场景，以帮助我们做出更好的优化。
注意：目前，一些特殊效果仍然依赖于 Canvas：例如轨迹特效、带有混合效果的热力图等。
自 v5.3.0 起，SVG 渲染器使用虚拟 DOM 进行了重构，性能提升了 2-10 倍，在某些特定场景下甚至可以达到数十倍！更多详情请参考 #836。
如何使用渲染器
如果通过以下方式完整引入 echarts，那么它已经自动引入并注册了 SVG 渲染器和 Canvas 渲染器。
import * as echarts from 'echarts';如果你正在使用按需引入，你需要手动引入所需的渲染器。
import * as echarts from 'echarts/core';
// You can use only the renderers you need
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);然后你可以在初始化图表时设置 renderer 参数。
// 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' });