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

因为前端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,　　//导出的图片分辨率比率,默认是1backgroundColor: '#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 Firefoxif (typeof MouseEvent === 'function') {var evt = new MouseEvent('click', {view: window,bubbles: true,cancelable: false});$a.dispatchEvent(evt);}// IEelse {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,　　//导出的图片分辨率比率,默认是1backgroundColor: '#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 Firefoxif (typeof MouseEvent === 'function') {var evt = new MouseEvent('click', {view: window,bubbles: true,cancelable: false});$a.dispatchEvent(evt);}// IEelse {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>

效果：

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

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

JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法...
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
echarts图表使用以及图片转码
1.echarts介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
【echarts柱状图保存为图片并下载】
echarts柱状图保存为图片并下载直接附上代码直接附上代码页面中设置下载柱状图按钮,带上下载图片名称. Mon 06Mon 13Mon 20获取url 截取base64 转blob 下载解 ...
ios7自定义返回按钮后，右滑返回功能失效解决方法
ios7自定义返回按钮后,右滑返回功能失效解决方法 -(void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; //开 ...
微信发图时找不到在其他软件上刚保存的图片或视频，但是在手机自带相册里面能看到的解决办法，亲测有效
现象描述: 刷抖音,看到好看的视频,保存下来,想要分享到朋友圈,但是却发现找不到刚保存的视频,打开自己手机相册却能看的到. 刷微博,看到搞笑,沙雕的图片,保存下载,想要分享到朋友圈,但是却发现找不到刚 ...
Winform中实现自定义水晶按钮控件(附代码下载)
场景效果注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现新建一个用户 ...
自定义Echarts图表图例的图片
从Echarts官网上我们可以知道图例默认的图片样式有以下几种,分别是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arr ...

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

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

最新文章

热门文章