Apache ECharts 图片导出：PNG、PDF与SVG

在数据可视化工作中，将精心设计的图表导出为图片格式是常见需求。Apache ECharts（可视化图表库）提供了灵活的导出功能，支持PNG、PDF和SVG等多种格式。本文将详细介绍如何通过工具按钮和API两种方式实现图表导出，并解决常见问题。

一、快速上手：工具按钮导出

ECharts内置的工具箱（Toolbox）组件提供了一键导出功能，无需编写额外代码即可使用。

基础配置

在图表配置项中添加toolbox选项，启用saveAsImage功能：

option = {
    toolbox: {
        feature: {
            saveAsImage: {
                show: true,
                title: '保存为图片'
            }
        }
    },
    // 其他配置...
}

完整示例可参考测试文件test/toolbox-saveImage-background-svg.html，该文件演示了SVG格式图表的导出效果。

格式选择

通过type参数指定导出格式，支持png（默认）、jpeg和svg：

saveAsImage: {
    type: 'svg',  // 导出为SVG矢量图
    title: '保存SVG图片'
}

注意：PDF格式需通过API方式导出，工具按钮暂不直接支持。

样式定制

可自定义导出图片的背景色、尺寸等参数：

saveAsImage: {
    backgroundColor: '#ffff00',  // 黄色背景
    pixelRatio: 2,  // 2倍分辨率
    connectedBackgroundColor: 'yellow'  // 多图表联动时的背景色
}

上述配置来自test/toolbox-saveImage-background-svg.html的118-122行，实现了导出图片的背景色定制。

二、高级用法：API编程导出

对于需要更多控制的场景，ECharts提供了echartsInstance.exportToCanvas()和echartsInstance.exportToSVG()方法。

导出为Canvas（PNG/JPEG）

// 获取图表实例
const chart = echarts.init(document.getElementById('chart'));

// 导出为Canvas
chart.exportToCanvas({
    pixelRatio: 2  // 分辨率
}).then(canvas => {
    // 将Canvas转换为图片URL
    const imgUrl = canvas.toDataURL('image/png');
    // 创建下载链接
    const link = document.createElement('a');
    link.download = 'chart.png';
    link.href = imgUrl;
    link.click();
});

导出为SVG

// 导出为SVG字符串
const svgStr = chart.getOption().renderer === 'svg' 
    ? chart.getSVG() 
    : await chart.exportToSVG();

// 保存SVG文件
const blob = new Blob([svgStr], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
// 创建下载链接（同上）

导出为PDF

ECharts本身不直接支持PDF导出，但可结合第三方库如jspdf实现：

import jsPDF from 'jspdf';

// 先导出为Canvas
chart.exportToCanvas().then(canvas => {
    const pdf = new jsPDF();
    // 将Canvas添加到PDF
    pdf.addImage(canvas, 'PNG', 10, 10);
    pdf.save('chart.pdf');
});

三、常见问题解决

1. 中文乱码问题

确保导出时使用了支持中文的字体，可在全局样式中设置：

body {
    font-family: 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
}

2. 图表截断问题

导出前调整图表尺寸或设置pageSize参数：

saveAsImage: {
    pageSize: 'A4',  // 适合PDF导出的纸张尺寸
    backgroundColor: '#ffffff'
}

3. SVG与Canvas对比

格式	优点	缺点	适用场景
PNG	兼容性好，支持透明	放大失真	网页展示、PPT插入
SVG	矢量无损，文件小	复杂图表渲染慢	印刷、高清展示
PDF	多页支持，可编辑	需要第三方库	报告、文档嵌入

四、示例图表

以下是不同导出格式的效果对比（图表数据来自测试用例）：

PNG格式导出

PNG导出示例
图1：使用默认配置导出的PNG图片（来源：test/line-sampling.html测试用例）

SVG格式导出

SVG导出示例
图2：SVG矢量图导出效果，可无损放大（来源：test/toolbox-saveImage-background-svg.html）

五、总结与扩展

ECharts提供了从简单到复杂的完整导出方案：

• 快速导出：使用toolbox.saveAsImage配置，适合普通用户
• 定制导出：通过API方法实现格式、尺寸等高级控制
• 批量导出：结合echarts.connect()实现多图表联动导出

更多导出相关的测试用例可参考test/目录下的文件，如test/line-sampling.html演示了不同采样率下的图表导出效果。

如果需要实现服务器端导出，可参考ECharts的SSR（服务端渲染）方案，相关代码位于ssr/目录。

提示：导出大量或复杂图表时，建议使用Web Worker避免阻塞主线程。