实现效果如下:
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
},
完事!