2018_01_18 echarts圖表添加背景圖片

樓主親測找到兩種方式給echarts添加背景圖片，各有各的好處，第一種實現起來簡單，但是保存圖表的時候，不會將背景圖片一起保存下來，第二種其實也挺簡單，將圖片轉base64碼的鏈接我會放到下面。

第一種：

<style type="text/css">


   #backImg{


    background: url("<%=basePath%>/images/nested _ring_graph.jpg");


   }


</style>

<div id="backImg" style="width:100%;height:100%;background-size: cover; -moz-background-size: cover; "><!-- 外層div用來放背景圖片 -->

<div id="xxx"></div><!-- 內層div是echarts容器 -->

</div>

第二種：參考代碼（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中的時候，很有可能造成電腦死機。。。這都是小事，添加進去，開服務器測試，就能看到你想要的結果了。

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