3分钟搞定Vue ECharts数据导出：CSV与Excel格式无缝实现方案

2026-02-04 04:37:05作者：凌朦慧Richard

你是否还在为图表数据导出功能头疼？手动复制粘贴效率低下，第三方插件又担心兼容性问题？本文将带你用最简单的方式，在3分钟内为Vue ECharts图表添加CSV与Excel格式的数据导出功能，无需复杂依赖，纯前端实现，兼容所有现代浏览器。

准备工作：了解ECharts数据结构

在开始实现导出功能前，我们需要先了解ECharts的数据结构。以最常见的柱状图为例，ECharts通常使用dataset或series.data存储数据，如demo/examples/BarChart.vue中所示：

// 数据获取逻辑示例 [demo/examples/BarChart.vue](https://gitcode.com/gh_mirrors/vu/vue-echarts/blob/dc0da13c1dd86e6aa7380e9b215ca621d9cbf6d9/demo/examples/BarChart.vue?utm_source=gitcode_repo_files#L10)
import getData from "../data/bar";
const option = shallowRef(getData());

数据结构分析

ECharts的数据通常包含以下关键部分：

维度（dimension）：X轴类目或数据分组
指标（metric）：Y轴数值或需要统计的数据
系列（series）：不同数据集的分组

实现CSV导出功能

CSV（逗号分隔值）是最简单的数据交换格式，实现成本最低。我们将通过以下步骤实现：

1. 获取ECharts图表数据

首先需要从ECharts实例中获取原始数据。通过getOption()方法可以获取当前图表的完整配置，包括数据部分：

// 获取图表数据核心代码
const getChartData = () => {
  const chartOption = chartRef.value.getOption();
  // 处理dataset或series.data数据
  return chartOption.dataset 
    ? processDataset(chartOption.dataset) 
    : processSeriesData(chartOption.series);
};

2. 转换为CSV格式

将ECharts数据转换为CSV格式需要处理表头和数据行：

// CSV转换工具函数
const convertToCSV = (data) => {
  // 获取表头
  const headers = Object.keys(data[0]).join(',');
  // 获取数据行
  const rows = data.map(item => Object.values(item).join(','));
  // 拼接CSV内容
  return [headers, ...rows].join('\n');
};

3. 创建下载功能

使用HTML5的Blob和URL.createObjectURL API实现文件下载：

// 文件下载函数
const downloadFile = (content, fileName, type) => {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  // 清理资源
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 0);
};

实现Excel导出功能

虽然纯前端无法直接生成真正的Excel文件（.xlsx），但我们可以生成CSV文件并修改文件扩展名为.xls，大多数电子表格软件都能正常打开。

完整导出按钮组件

将上述功能整合为一个可复用的导出按钮组件：

<template>
  <div class="export-actions">
    <button @click="exportCSV" class="export-btn">导出CSV</button>
    <button @click="exportExcel" class="export-btn">导出Excel</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const chartRef = ref(null);

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

// 导出Excel (实际为CSV格式)
const exportExcel = () => {
  const data = getChartData();
  const csvContent = convertToCSV(data);
  // 修改文件扩展名为.xls
  downloadFile(csvContent, 'chart-data.xls', 'application/vnd.ms-excel');
};
</script>

<style scoped>
.export-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.export-btn {
  padding: 8px 16px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.export-btn:hover {
  background: #359469;
}
</style>

集成到Vue组件

将导出功能集成到现有的图表组件中，以下是完整示例：

<template>
  <div class="chart-container">
    <!-- ECharts图表组件 -->
    <VChart 
      ref="chartRef" 
      :option="option" 
      autoresize 
    />
    <!-- 导出按钮组件 -->
    <ExportButton :chart-ref="chartRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VChart from "../../src/ECharts";
import ExportButton from "./ExportButton.vue";
import getData from "../data/bar";

const chartRef = ref(null);
const option = ref(getData());
</script>

高级优化：处理复杂图表数据

对于包含多个系列或使用数据集（dataset）的复杂图表，需要更完善的数据处理逻辑：

// 处理dataset数据 src/utils/data.ts
const processDataset = (dataset) => {
  const source = dataset[0].source;
  const dimensions = source[0];
  return source.slice(1).map(row => {
    return dimensions.reduce((obj, key, index) => {
      obj[key] = row[index];
      return obj;
    }, {});
  });
};

// 处理series.data数据
const processSeriesData = (series) => {
  // 处理多系列数据合并
  return series.flatMap((s, seriesIndex) => 
    s.data.map((item, index) => ({
      series: s.name || `Series ${seriesIndex + 1}`,
      index,
      value: item.value || item,
      name: item.name || `Item ${index + 1}`
    }))
  );
};