美文网首页开发笔记
echart 在图表外部调用保存图片操作

echart 在图表外部调用保存图片操作

作者: 孤傲小狼 | 来源:发表于2019-07-31 09:52 被阅读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;">'
                    '![](' + url + ')'
                    '</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="保存为图片"/>   //添加按钮调用方法
    
    

    参考文档:https://www.jianshu.com/p/12257cd84098

    相关文章

      网友评论

        本文标题:echart 在图表外部调用保存图片操作

        本文链接:https://www.haomeiwen.com/subject/avzarctx.html