echarts （二） 之canvas设置地图背景图

实现效果如下：

echarts效果实现参考：echarts地图连线动效之（一）

接下来说这个背景图是如何利用canvas实现的：
首先在初始化echarts后增加下面代码：

``
var chart = echarts.init(document.getElementById("beijing"));
	
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

canvas.width = chart.getWidth() * window.devicePixelRatio;
canvas.height = chart.getHeight() * window.devicePixelRatio;

var fullImage = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    fullImage.src = canvas.toDataURL();
    setTimeout(function() {
        chart.resize();
    }, 100)
}
img.src = '(此处是背景图的base64编码)'

然后在echarts中的opention中增加backgroundColor配置参数：

backgroundColor: {
  type: "pattern",
  repeat: "repeat",
  image: fullImage
},

完事!