当前位置:首页 > 编程笔记 > 正文
已解决

echarts图表截图保存成图片的两种方法saveAsImage

来自网友在路上 174874提问 提问时间:2023-11-07 19:06:32阅读次数: 74

最佳答案 问答题库748位专家为你答疑解惑

echarts图表截图保存成图片的两种方法saveAsImage

    • 1.echarts自带的截图
    • 2.使用echarts的API方法

1.echarts自带的截图

option中加上

toolbox: {show: true,feature: {saveAsImage: {}}},

2.使用echarts的API方法

getDataURL 导出图表图片,返回一个 base64 的 URL,可以设置为Image的src

//先clone来避免影响页面显示var clone = $('#'+divid).clone();
//找到所有echarts图表容器var charts = clone.find('#'+chartsid);var curEchart = echarts.getInstanceByDom(charts[0]);if(curEchart) {//将图表替换为图片var base = curEchart.getDataURL({pixelRatio: 2,backgroundColor: '#fff'});}var a = document.createElement("a");//创建一个<a></a>标签
a.href = base; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
a.download = `${title}.jpg`; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"echarts图表截图保存成图片的两种方法saveAsImage":http://eshow365.cn/6-34675-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!