Echarts如何进行图表的导出功能

ECharts 图表导出功能实现指南

一 内置工具栏一键导出

• 在图表的 toolbox 中启用 saveAsImage，可快速实现导出按钮与功能。
• 常用配置项：
  • type：导出格式，支持 ‘png’（默认）、‘jpeg’；也可设置为 ‘svg’（部分版本/环境支持，见下文说明）。
  • pixelRatio：导出分辨率倍率，默认 1，设为 2 可获得更清晰的高清图。
  • backgroundColor：导出背景色，默认 ‘auto’（取图表背景或白色）。
  • excludeComponents：导出时忽略的组件，默认 [‘toolbox’]（避免把导出按钮也导进去）。
  • name：导出的文件名，默认使用 title.text。
• 示例：

const option = {
  toolbox: {
    feature: {
      saveAsImage: {
        show: true,
        type: 'png',            // 可选 'jpeg'；部分版本支持 'svg'
        pixelRatio: 2,
        backgroundColor: '#fff',
        excludeComponents: ['toolbox'],
        name: 'my-chart'
      }
    }
  }
};

• 说明：官方与多数实践中，toolbox 的 saveAsImage 主要支持 png/jpeg；若需稳定的 SVG 导出，建议使用 API 方式（见第二部分）。

二 编程式导出 Canvas SVG PDF

• 适用场景：自定义按钮、批量导出、动态修改文件名/尺寸/分辨率、导出为 SVG/PDF 等。
• 导出为 PNG/JPEG（Canvas）

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

chart.exportToCanvas({ pixelRatio: 2 }).then(canvas => {
  const a = document.createElement('a');
  a.download = 'chart.png';
  a.href = canvas.toDataURL('image/png');
  a.click();
});

• 导出为 SVG（矢量）

// 若图表使用 SVG 渲染器，可直接获取；否则用 exportToSVG 导出
const svgStr = chart.getOption().renderer === 'svg'
  ? chart.getSVG()
  : await chart.exportToSVG();

const blob = new Blob([svgStr], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.download = 'chart.svg';
a.href = url;
a.click();
URL.revokeObjectURL(url);

• 导出为 PDF（借助 jsPDF）

import jsPDF from 'jspdf';

chart.exportToCanvas({ pixelRatio: 2 }).then(canvas => {
  const pdf = new jsPDF({ orientation: 'landscape' });
  const imgData = canvas.toDataURL('image/png');
  pdf.addImage(imgData, 'PNG', 10, 10, 280, 160); // 位置与尺寸可按需调整
  pdf.save('chart.pdf');
});

• 提示：导出前确保图表已完成渲染；大数据量图表可适当降低复杂度或分辨率以提升导出稳定性。

三 导出图表数据 CSV Excel

• 适用场景：导出原始数据而非图片，便于在 Excel/Sheets 中进一步分析。
• 思路：通过 chart.getOption() 获取配置，解析 dataset 或 series.data，转换为 CSV 并触发下载；Excel 可通过设置 MIME 为 application/vnd.ms-excel 并以 .xls 扩展名保存，常见表格软件均可打开。
• 示例：

function getChartData(chart) {
  const opt = chart.getOption();
  if (opt.dataset) return processDataset(opt.dataset);
  return processSeriesData(opt.series);
}

function convertToCSV(data) {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(r => Object.values(r).join(','));
  return [headers, ...rows].join('\n');
}

function downloadFile(content, fileName, mime) {
  const blob = new Blob([content], { type: mime });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = fileName; a.click();
  setTimeout(() => URL.revokeObjectURL(url), 100);
}

// 导出 CSV
const csv = convertToCSV(getChartData(chart));
downloadFile(csv, 'chart-data.csv', 'text/csv');

// 导出“Excel”（CSV 格式，.xls 扩展名）
downloadFile(csv, 'chart-data.xls', 'application/vnd.ms-excel');

• 说明：这是前端轻量方案，生成的 .xls 实质为 CSV，适合大多数办公软件；如需真正的 .xlsx（样式、多表等），建议使用专门的库（如 SheetJS）或服务端生成。

四 常见问题与优化

• 中文乱码：在页面或图表样式中设置支持中文的字体，例如 ‘SimHei’、‘WenQuanYi Micro Hei’ 等，避免导出后字符缺失或替代。
• 导出图片空白/截断：确保图表容器有明确的 width/height；在渲染完成后再触发导出；必要时提高 pixelRatio 或调整图表尺寸，避免容器被裁剪。
• 分辨率与清晰度：通过 saveAsImage.pixelRatio 或 exportToCanvas({ pixelRatio }) 提升清晰度，注意过高倍率可能影响导出耗时与内存占用。
• 矢量与位图取舍：SVG 矢量无损、适合印刷与缩放；PNG/JPEG 位图兼容性好，适合插入网页或 PPT。
• 批量/服务端导出：需要批量生成或 无头 环境时，可采用 Puppeteer 等方案在服务端渲染并导出，减轻浏览器压力并便于自动化。