echart 在图表外部调用保存图片操作
2019-07-31 本文已影响0人
孤傲小狼
注意：下载名称可能获取不到，以至于无法执行，我直接赋值固定的下载名称download.png
<script>
//传递图表容器id
function downloadImpByChart(chartId) {
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5, //导出的图片分辨率比率,默认是1
backgroundColor: '#fff', //图表背景色
excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏
'toolbox'
],
type: 'png' //图片类型支持png和jpeg
});
var $a = document.createElement('a');
var type = 'png';
$a.download = 'download.' + 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);
}
};
</script>
<div id="someline"></div> //图表容器
<input class="btn btn-default" style="float:right" type="button" onclick="downloadImpByChart('someline')" value="保存为图片"/> //添加按钮调用方法
