外部按钮调用ECharts图表的保存为图片操作

最新推荐文章于 2024-04-26 11:09:20 发布

橙子_tong

最新推荐文章于 2024-04-26 11:09:20 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42220533/article/details/102857603

版权

最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，看了看也没遇到一个可以满意的。后来，突然想到了echart开放了源码，可以看看源码，找到下载的方法，然后调用不就可以了（可能是我技术忒次，看了看不只到如何直接调用方法，所以把源方法copy下来，改了改，只需要传递图表的容器id即可）

echart图表示例（工具栏中有下载图片按钮）

附上代码记录一下：

//传递图表容器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 = 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;">'
'![](' + url + ')'
'</body>';
var tab = window.open();
tab.document.write(html);
}
};

橙子_tong

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
外部按钮调用ECharts图表的保存为图片操作

最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，看了看也没遇到一个可以满意的。后来，突然想到了echart开放了源码，可以看看源码，找到下载的方法，然后调用不就可以了（可能是我技术忒次，看了看不只到如何直接调用方法，所以把源方法copy下来，改了改，只需要传递图表的容器id即可...
复制链接

扫一扫