ECharts如何导出图

在 ECharts 中，导出图表主要有以下几种常用方式：

一、使用 ECharts 自带工具栏导出（最简单）

ECharts 提供了 toolbox 组件，可一键导出图片。

option = {
  toolbox: {
    feature: {
      saveAsImage: {
        name: '图表名称',     // 导出文件名
        type: 'png',         // png / jpeg
        backgroundColor: '#fff'
      }
    }
  },
  // 其他配置
};

✅ 页面上会出现下载按钮，用户点击即可保存图片。

二、通过 API 手动导出（代码中触发）

const chart = echarts.init(document.getElementById('main'));

// 获取 base64 图片
const base64 = chart.getDataURL({
  type: 'png',
  pixelRatio: 2,
  backgroundColor: '#fff'
});

// 创建下载
const a = document.createElement('a');
a.href = base64;
a.download = 'chart.png';
a.click();

✅ 适合“按钮导出”“自动导出”

三、导出为 PDF（配合 jsPDF）

import jsPDF from 'jspdf';

const img = chart.getDataURL({
  type: 'png',
  pixelRatio: 2
});

const pdf = new jsPDF();
pdf.addImage(img, 'PNG', 10, 10, 180, 100);
pdf.save('chart.pdf');

四、服务端导出（Node.js）

适用于报表系统：

• 使用 echarts-node / puppeteer
• 在服务端渲染并导出图片或 PDF

示例（Puppeteer）：

await page.screenshot({ path: 'chart.png' });

五、常见问题

1️⃣ 导出的图是空白？

• 确保图表已 setOption 完成
• 使用 setTimeout 或 finished 事件后再导出

chart.on('finished', () => {
  // 导出
});

2️⃣ 想导出当前视图（含缩放）？

chart.getDataURL({
  includeWebkitStyles: true
});

如果你能告诉我：

• 是 前端按钮导出 还是 后端批量导出
• 需要 PNG / PDF / Excel

我可以给你更具体的完整示例。