使用 SVG 或 Canvas 渲染
大多数浏览器端的图表库都使用 SVG 或 Canvas 作为底层渲染器。一般来说，这两种技术可以互换并且具有类似的效果。然而，在某些特定场景和情况下，差异可能很明显。因此，决定使用哪种技术来渲染图表总是一个艰难的选择。
Canvas 从一开始就被用作 ECharts 的渲染器。自从 v4.0 以来，ECharts 提供了 SVG 渲染器作为附加选项。您可以在初始化图表时将 renderer 参数 指定为 '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';如果您使用的是 可摇树导入，则需要手动导入所需的渲染器。
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' });
