1. 程式人生 > >echarts3 圖表外自定義js實現儲存圖片功能

echarts3 圖表外自定義js實現儲存圖片功能

最近專案從echarts2升級到了3版本。導致原先的很多功能都不能使用。echarts2中暴露出來的屬性和方法可以讓我們很容易的在echart外部自定義事件來儲存圖片。echart3中暴露出來的很少。比如說儲存圖片功能。在echart3中圖表只有定義了toolbox,給option增加toolbox元件,才會在圖表右上角顯示儲存為圖片的功能。而且那個圖示是在圖表本身的,並不是在圖表外部實現的。
那如果在外部的話 如何實現呢。由於echart3中不能直接呼叫,通過檢視echart3的原始碼的話,那就很容易的能夠在外部實現了。
程式碼實現
由於可以通過echart3.api的getDataUrl()方法來匯出圖片,但是得到的結果是base64的url,利用html5的a標籤的download屬性很容易的實現圖片下載。由於IE不支援download,因此在IE下的處理是另開一個視窗顯示圖片,如果要實現下載,只能手動右鍵儲存了。這樣的話,我們不是必須得用圖表生成的小圖示來實現儲存圖片功能。可以在圖表外部隨意自定義一個事件或者觸發位置來實現儲存圖片。