分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 02:26责任编辑:熊小新关键词:url

问题描述:

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图表数据不显示的问题的解决方案

原文地址:https://www.cnblogs.com/chaoyueqi/p/10108565.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved