在echarts图表外调用echarts的下载功能以及echarts getdataurl图表数据不显示的问题的解决方案
Posted chaoyueqi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在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了
animation: false
参考链接1:https://blog.csdn.net/zuoyiran520081/article/details/77877355
参考链接2:https://www.jianshu.com/p/12257cd84098
以上是关于在echarts图表外调用echarts的下载功能以及echarts getdataurl图表数据不显示的问题的解决方案的主要内容,如果未能解决你的问题,请参考以下文章