echarts怎么导出图片

在 ECharts 中导出图片，常见有几种方式，下面按「使用场景」给你总结：

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

ECharts 提供了 toolbox 组件，可以直接在图表上点按钮保存图片。

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

✅ 优点：零代码、用户可操作
❌ 缺点：依赖浏览器交互

二、通过 API 主动导出（常用）

1️⃣ 获取图片 base64

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

const dataURL = chart.getDataURL({
  type: 'png',
  pixelRatio: 2,
  backgroundColor: '#fff'
});

2️⃣ 下载图片

const a = document.createElement('a');
a.href = dataURL;
a.download = 'chart.png';
a.click();

✅ 适合：按钮导出、自动导出

三、导出为 Blob（更规范）

chart.getDataURL({
  type: 'png',
  pixelRatio: 2,
  backgroundColor: '#fff'
});

如果需要 Blob：

fetch(dataURL)
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'chart.png';
    a.click();
  });

四、服务端导出（Node / 无头浏览器）

如果需要在 后端导出（如定时任务）：

方案

• puppeteer + 无头 Chrome
• node-echarts
• echarts + canvas（Node 端）

示例（puppeteer）：

const buffer = await page.screenshot();

五、常见问题

❓ 导出的图模糊？

pixelRatio: 2  // 或 3

❓ 背景是透明的？

backgroundColor: '#fff'

❓ 图表没渲染完就导出？

确保：

chart.setOption(option);
// 等动画结束或 setTimeout

推荐用法总结

如果你能告诉我：

• 是 前端还是后端
• 是否 Vue / React
• 是否需要 批量 / 自动导出

我可以直接给你一套完整代码。