echarts3 图表外自定义js实现保存图片功能

最近项目从echarts2升级到了3版本。导致原先的很多功能都不能使用。echarts2中暴露出来的属性和方法可以让我们很容易的在echart外部自定义事件来保存图片。echart3中暴露出来的很少。比如说保存图片功能。在echart3中图表只有定义了toolbox,给option增加toolbox组件,才会在图表右上角显示保存为图片的功能。而且那个图标是在图表本身的,并不是在图表外部实现的。
那如果在外部的话 如何实现呢。由于echart3中不能直接调用,通过查看echart3的源码的话,那就很容易的能够在外部实现了。
代码实现
由于可以通过echart3.api的getDataUrl()方法来导出图片,但是得到的结果是base64的url,利用html5的a标签的download属性很容易的实现图片下载。由于IE不支持download,因此在IE下的处理是另开一个窗口显示图片,如果要实现下载,只能手动右键保存了。这样的话,我们不是必须得用图表生成的小图标来实现保存图片功能。可以在图表外部随意自定义一个事件或者触发位置来实现保存图片。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值