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