使用echarts插件做图表常见的几个问题——图形的两种渲染方式

Posted 2022-11-24 juicy-initial

场景：echarts中图形有两种渲染方式，canvas渲染和svg渲染，分别运用在什么样的场景下

措施：Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效；在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。

在初始化图表实例时，传入参数选择渲染器类型，代码如下

// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, renderer: ‘canvas‘);
// 等价于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, renderer: ‘svg‘);