在echarts圖表外調用echarts的下載功能以及echarts getdataurl圖表數據不顯示的問題的解決方案
阿新 • • 發佈:2018-12-12
參考 set 文件 dataurl ech setoption down 實現 ins 方法
問題描述:
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了
animation: false
參考鏈接1:https://blog.csdn.net/zuoyiran520081/article/details/77877355
參考鏈接2:https://www.jianshu.com/p/12257cd84098
在echarts圖表外調用echarts的下載功能以及echarts getdataurl圖表數據不顯示的問題的解決方案