Echarts（三）调用底层zRender对象画图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014744118/article/details/80065202

一、zRender介绍

ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

注意：echarts3.x版本是基于zrender的canvas，4.x可以选择基于canvas或者svg。

二、 调用方法

本文中下方的调用方法仅针对在echarts 3.x以上版本中调用zrender对象画图，myChart代表的是获取到的DOM容器初始化后的handle

var myChart = echarts.init(document.getElementById('DOM容器ID'));

省略echarts画图过程，以下是在echarts中用zrender在左上角画了一个正方形。

var zr = myChart.getZr();
var rect = new echarts.graphic.Rect({
	position:[Math.random() * 200, Math.random() * 200],
	scale;[1,1],
	shape:{
		x:10,
		y:20,
		width:100,
		height:50
	},
	style:{
		fill:'red',
		text: 'zRender Rect'
	},
	zlevel:3
});
zr.render();