将echarts图表导出图片

最新推荐文章于 2025-06-12 17:13:26 发布

天空中的星~

最新推荐文章于 2025-06-12 17:13:26 发布

阅读量7.1k

点赞数 9

CC 4.0 BY-SA版权

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/workhard0905/article/details/123128888

这篇博客介绍了如何利用ECharts的getDataURL方法将页面中的Echarts图表导出为PNG格式的图片。通过设置导出的类型、分辨率、背景色以及忽略的组件，可以自定义导出的图片样式。示例代码演示了创建一个隐藏的链接元素，将其href属性设置为图表的base64 URL，然后模拟点击下载图片，最后释放URL对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将页面中的echarts图标导出png

echarts官网中有个 getDataURL方法可以返回一个base64的URL

let myChart = this.echarts.init(document.getElementById('large_chart'));
const picInfo = myChart.getDataURL({
  // 导出的格式，可选 png, jpg, svg
  // 注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
  type: 'png',
  // 导出的图片分辨率比例，默认为 1。
  pixelRatio: 1,
  // 导出的图片背景色，默认使用 option 里的 backgroundColor
  backgroundColor: '#020527',
  // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
  excludeComponents: 'toolbox'
});
const elink = document.createElement('a');
elink.download = '图表';
elink.style.display = 'none';
elink.href = picInfo;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink)