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

最新推荐文章于 2024-08-04 16:33:59 发布

jia814583973

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量3.1k

点赞数 2

文章标签： js javascript jquery html5

本文链接：https://blog.csdn.net/jia814583973/article/details/106568656

版权

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

最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，有很多，但是我遇到了一个问题就是ECharts中的getConnectedDataURL方法获取的base64编码有可能会很大，会导致下载失败；然后我就想到了利用画布获取base64编码，这样就不会有上边的问题；两种方法我都拿过来了，需要的可以看看。。。

1.第一种echarts自带获取图表的base64编码（getConnectedDataURL）；
（这种方式有可能获取的base64编码过大而导致下载失败）

//传递图表容器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);
}
};

2.利用画布将图形转化成的base64编码就不会产生以上问题。

//chartId：echarts图的id；name：下载图片的名字
    function downloadImpByChart(chartId,name) {
        var url = getFullCanvasDataURL(chartId);
        var link = document.createElement('a');
        link.href = url;
        link.download = name+".png";
        link.click();
    };

    //将图形转成base64的图片
    function getFullCanvasDataURL(divId){
        //将第一个画布作为基准。
        var baseCanvas = $("#"+divId).find("canvas").first()[0];
        if(!baseCanvas){
            return false;
        };
        var width = baseCanvas.width;
        var height = baseCanvas.height;
        var ctx = baseCanvas.getContext("2d");
        //遍历，将后续的画布添加到在第一个上
        $("#"+divId).find("canvas").each(function(i,canvasObj){
            if(i>0){
                var canvasTmp = $(canvasObj)[0];
                ctx.drawImage(canvasTmp,0,0,width,height);
            }
        });
        //获取base64位的url
        return baseCanvas.toDataURL();
    }

jia814583973

关注

2
点赞
踩
9

收藏

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

外部按钮调用ECharts图表的保存为图片操作最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，有很多，但是我遇到了一个问题就是ECharts中的getConnectedDataURL方法获取的base64编码有可能会很大，会导致下载失败；然后我就想到了利用画布获取base64编码，这样就不会有上边的问题；两种方法我都拿过来了，需要的可以看看。。。1.第一种echarts自带获取图表的
复制链接

扫一扫