1. 腾来网首页
  2. 开发者博客
  3. 程序开发

在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案

问题描述:

echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录:

解决方法:
1.借助a标签download属性

<a :href="chartImgUrl" download="echart.png">下载</a>

href属性 => 需要下载的内容的url地址
download属性 => 下载文件重命名
注意:
href链接为同源时,download属性才起作用,否则,只是打开链接内容。

2.借助echarts实例getDataURL方法

链接:http://echarts.baidu.com/api.html#echartsInstance.getDataURL

chart.setOption(option);//在此之后,可以调用getDataURL来获取图表url
//this => vue实例
//chartImgUrl => a的href链接的值
this.chartImgUrl = chart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});

3.通过上面的方式,下载下来的图片只有底图,而没有数据的图表,此时,还需要对echarts实例的配置项中的series进行如下设置来关闭动画,然后就OK了。如果是希望保留动画效果的,则可以通过setTimeout进行一下延时处理,道理是一样的

animation: false

setTimeout(function() { this.chartImgUrl = chart.getDataURL({ pixelRatio: 2, backgroundColor: ‘#fff’ }); }, 1000)

发布者:腾来分享,转转请注明出处:http://tenglai.net/blog/coding/2670.html

发表评论

电子邮件地址不会被公开。

联系我们

18702030367

在线咨询:点击这里给我发消息

邮件:Jason@tenglai.cn

工作时间:周一至周五,9:30-18:30,节假日休息

QR code