在echarts圖表外調用echarts的下載功能以及echarts getDataURL圖表數據不顯示的問題的解決方案

問題描述：

echarts圖表的toolbox里面本身有下載的功能，但有的時候，我們需要在echarts圖表外添加一個按鈕來實現下載，以下是基於vue，echarts版本4的一個解決方案記錄：

解決方法：
1.借助a標簽的download屬性

<a :href="chartImgUrl" download="echart.png">下載</a>

href屬性 => 需要下載的內容的url地址
download屬性 => 下載文件重命名
注意：
href鏈接為同源時，download屬性才起作用，否則，只是打開鏈接內容。

2.借助echarts實例的getDataURL方法

鏈接：http://echarts.baidu.com/api.html#echartsInstance.getDataURL

chart.setOption(option);//在此之后，可以調用getDataURL來獲取圖表url
//this => vue實例
//chartImgUrl => a的href鏈接的值
this.chartImgUrl = chart.getDataURL({
	pixelRatio: 2,
	backgroundColor: '#fff'
});

3.通過上面的方式，下載下來的圖片只有底圖，而沒有數據的圖表，此時，還需要對echarts實例的配置項中的series進行如下設置來關閉動畫，然后就OK了。如果是希望保留動畫效果的，則可以通過setTimeout進行一下延時處理，道理是一樣的

animation: false

setTimeout(function() {
	this.chartImgUrl = chart.getDataURL({
	    pixelRatio: 2,
	    backgroundColor: '#fff'
        });
}, 1000)						        

參考鏈接1：https://blog.csdn.net/zuoyiran520081/article/details/77877355
參考鏈接2：https://www.jianshu.com/p/12257cd84098