将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】

TinpeaV

已于 2022-12-28 17:20:15 修改

阅读量2.1k

点赞数 1

文章标签： echarts javascript ecmascript

于 2022-12-28 17:17:30 首次发布

本文链接：https://blog.csdn.net/tinpeav/article/details/128471327

版权

因为前端UI设计的Echarts图表的下载按钮是自定义的，但是Echarts自带工具栏的图表下载按钮是固定的不能改变，所以我们需要另写一个方法：

具体做法如下：

1、首先创建一个div来展示我们的Echarts图表

<div id="main" style="height: 800px;width: 800px;margin-left: 300px;">

2、创建自定义图片的下载按钮

<a href="javascript:void(0)" class="savepng" ><img onclick="downloadImpByChart('main')"  src="图片路径" alt="下载"></a>

3、【重头戏来了】写js方法代码

function downloadImpByChart(main){
        var myChart = echarts.getInstanceByDom(document.getElementById(main));
        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;">'
                + '<img src="' + url + '" style="max-100%;" title="' +  myChart.getOption().title[0].text + '" />'
                + '</body>';
            var tab = window.open();
            tab.document.write(html);
        }
    };

完整代码：

<div id="main" style="height: 800px;width: 800px;margin-left: 300px;">

<a href="javascript:void(0)" class="savepng" ><img onclick="downloadImpByChart('main')"  src="你自定义的图片路径" alt="下载"></a>

<script>
    function downloadImpByChart(main){
        var myChart = echarts.getInstanceByDom(document.getElementById(main));
        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;">'
                + '<img src="' + url + '" style="max-100%;" title="' +  myChart.getOption().title[0].text + '" />'
                + '</body>';
            var tab = window.open();
            tab.document.write(html);
        }
    };
</script>

效果：