2018_01_18 echarts图表添加背景图片

楼主亲测找到两种方式给echarts添加背景图片，各有各的好处，第一种实现起来简单，但是保存图表的时候，不会将背景图片一起保存下来，第二种其实也挺简单，将图片转base64码的链接我会放到下面。

第一种：

第二种：参考代码（http://gallery.echartsjs.com/editor.html?c=xBycRXbPgx）

不需要在为echarts准备的容器外套加div，需要使用echarts的backgroundColor配置，默认是无背景，本来我也以为backgroundColor只能添加背景颜色，原来也可以添加背景图片，代码如下：

var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = myChart.getWidth() * window.devicePixelRatio;
canvas.height = myChart.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() {
      myChart.resize();
  }, 100)
}

img.src = '此处添加图片的base64码'

option ={

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

       .........

}

base64码转换地址：https://www.css-js.com/tools/base64.html

转换完以后的base64码特别长，而且添加到js中的时候，很有可能造成电脑死机。。。这都是小事，添加进去，开服务器测试，就能看到你想要的结果了。

效果图：（哈哈哈，笑死我）