最近使用ECharts庫繪制圖表划咐，依據(jù)需求希望可以把圖表設(shè)置的保存為圖片操作可以在圖表外部調(diào)用,主要是希望可以和項(xiàng)目之前的下載圖片操作界面保持一致切威。然后上網(wǎng)找了一些方法勺馆，看了看也沒遇到一個(gè)可以滿意的库物。后來粘茄，突然想到了echart開放了源碼签舞，可以看看源碼，找到下載的方法柒瓣，然后調(diào)用不就可以了（可能是我技術(shù)忒次儒搭，看了看不只到如何直接調(diào)用方法，所以把源方法copy下來芙贫，改了改搂鲫，只需要傳遞圖表的容器id即可）
echart圖表示例（工具欄中有下載圖片按鈕）
附上代碼記錄一下
//傳遞圖表容器id
function downloadImpByChart(chartId) {
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5, //導(dǎo)出的圖片分辨率比率,默認(rèn)是1
backgroundColor: '#fff', //圖表背景色
excludeComponents:[ //保存圖表時(shí)忽略的工具組件,默認(rèn)忽略工具欄
'toolbox'
],
type:'png' //圖片類型支持png和jpeg
});
var $a = document.createElement('a');
var type = 'png';
$a.download = myChart.getOption().title[0].text + '.' + type;
$a.target = '_blank';
$a.href = url;
// Chrome and Firefox
if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: false
});
$a.dispatchEvent(evt);
}
// IE
else {
var html = ''
- '<body style="margin:0;">'
- ''
- '</body>';
var tab = window.open();
tab.document.write(html);
}
};
