{{target: renderer}}
Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.
ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from ECharts v3.8 we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter renderer as 'canvas'
or 'svg'
when initailizing a chart instance.
That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library zender, where they are implemented as a Canvas renderer and a alternative SVG renderer.
Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some special visual effect. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:
In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.
How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.
Therefore feedback of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.
Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.
ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.
import 'zrender/lib/svg/svg';
Then wen can specify renderer by parameter:
// Use the Canvas renderer (default). var chart = echarts.init(containerDom, null, {renderer: 'canvas'}); // which is equal to: var chart = echarts.init(containerDom, null, {renderer: 'canvas'}); // Use the SVG renderer. var chart = echarts.init(containerDom, null, {renderer: 'svg'});