使用 Canvas 或 SVG 渲染
大多数浏览器端图表库会选择SVG或Canvas进行渲染。 出于图表目的，这两种技术通常可以互换，但效果相似。 而且在某些场景中，他们的表现和能力是有些不同的。 因此，他们的选择成为了一个依然存在且不容易有标准答案的话题。
ECharts 从一开始仍然使用 Canvas 来绘制图表（不仅适用于 IE8 - 使用 VML）。 EChartsv3.8发布了SVG渲染器（测试版），从而提供了新的选择。 只需要在初始化图表实例时将renderer参数设置为'canvas'或'svg'即可指定渲染器，比较方便。
SVG和Canvas这两种使用形式截然不同的技术可以同时透明支持。 这主要得益于 ECharts 底层库 ZRender 的体现和实现，它产生了可互换的 SVG 渲染器和 Canvas 渲染器。
选择哪个渲染器
一般来说，Canvas更适合绘制图形元素数量极其庞大的图表（这通常是由大量数据造成的）（例如地理坐标系或平行坐标系上的热图、大比例折线图或散点图）系统等）echarts图表优化，这也有利于个人视觉特效的实现。 而且，在很多场景下echarts图表优化，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'});
