设为首页收藏本站
开启辅助访问

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

 您所在的位置：网站首页 › 自定义页图片 › 将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】

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

2022-12-30 04:31| 来源: 网络整理| 查看: 265

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

具体做法如下：

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

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

下载

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 = '' + '' + '' + ''; var tab = window.open(); tab.document.write(html); } };

完整代码：

下载 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 = '' + '' + '' + ''; var tab = window.open(); tab.document.write(html); } };

效果：

 参考自：ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法 - 走看看



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3