Echarts如何导出图表

发布时间：2025-09-06 08:35:01 来源：亿速云阅读：223 作者：小樊栏目：编程语言

ECharts 导出图表主要有以下几种方式：

导出为图片（Base64/文件）

使用 getDataURL 方法：获取图表 Base64 编码的图片数据，可指定格式（png/jpeg）、分辨率等参数，通过创建 <a> 标签触发下载。

const base64Image = myChart.getDataURL({  
  type: 'png',  
  pixelRatio: 2,  
  backgroundColor: '#fff'  
});  
const link = document.createElement('a');  
link.href = base64Image;  
link.download = 'chart.png';  
link.click();

通过 Canvas 导出：利用 getRenderedCanvas 方法获取 Canvas 对象，再通过 toBlob 生成文件下载。

myChart.getRenderedCanvas({ pixelRatio: 2 }).toBlob(blob => {  
  const link = document.createElement('a');  
  link.href = URL.createObjectURL(blob);  
  link.download = 'chart.png';  
  link.click();  
});

导出为 PDF
- 结合 jsPDF：将图表 Base64 图片插入 PDF，支持自定义页面布局、方向等。
```
const imgData = myChart.getDataURL('jpeg');  
const pdf = new jsPDF();  
pdf.addImage(imgData, 'JPEG', 10, 10, 180, 100);  
pdf.save('chart.pdf');  
```
- 批量导出多个图表：通过 jsZip 将多个图表图片压缩为 ZIP 文件下载。
其他方式
- 浏览器打印功能：通过 Ctrl+P 打印图表为 PDF（需手动操作，适合简单场景）。

注意：

部分方法需引入第三方库（如 jsPDF、html2canvas），需提前安装。
导出时注意图表是否渲染完成，避免异步问题导致内容缺失。

向AI问一下细节

Echarts如何导出图表

猜你喜欢

最新资讯

相关推荐

相关标签