問題描述：

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

轉載于:https://www.cnblogs.com/chaoyueqi/p/10108565.html

總結

以上是生活随笔為你收集整理的在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。