vue3 echarts 下载图表

### Vue3 中 ECharts 图表导出或下载功能 在 Vue3 中实现 ECharts 的图表导出或下载功能，可以通过多种方式完成。以下是两种常见的方法：一种是通过 `html2canvas` 库将图表渲染为图片并下载；另一种是利用 ECharts 提供的内置工具栏功能。 #### 方法一：使用 html2canvas 导出图表为图片 此方法适用于需要自定义下载逻辑的情况。可以按照以下步骤操作： 1. 安装依赖库 需要安装 `html2canvas` 来捕获 DOM 节点的内容作为图像。 ```bash npm install html2canvas --save ``` 2. 编写组件代码 在 Vue 组件中引入 `html2canvas` 并编写下载函数。 ```javascript <template> <div> <button @click="downloadChart">下载图表</button> <div id="chart-container" ref="chartContainer"></div> </div> </template> <script> import * as echarts from 'echarts'; import html2canvas from 'html2canvas'; export default { name: "EchartsDownload", data() { return { chartInstance: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { const chartDom = document.getElementById('chart-container'); this.chartInstance = echarts.init(chartDom); const option = { title: { text: '示例图表' }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] }, yAxis: { type: 'value' }, series: [{ data: [80, 90, 70], type: 'bar' }], }; this.chartInstance.setOption(option); }, downloadChart() { html2canvas(this.$refs.chartContainer).then((canvas) => { const imgData = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); const link = document.createElement('a'); link.download = '图表.png'; // 文件名 link.href = imgData; link.click(); link.remove(); }); }, }, }; </script> ``` 这种方法的核心在于使用 `html2canvas` 将整个容器（包括 ECharts 渲染的部分）转换为 Canvas 对象，并将其保存为图片文件[^2]。 --- #### 方法二：使用 ECharts 内置工具栏导出图表 如果不需要额外定制化功能，可以直接使用 ECharts 自带的工具栏来提供下载选项。 1. 初始化 ECharts 工具栏配置 使用 ECharts 的 `toolbox` 属性启用工具栏，并设置支持的功能项（如保存为图片）。 ```javascript <template> <div id="chart-container" style="width: 600px; height: 400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { mounted() { const chartDom = document.getElementById('chart-container'); const myChart = echarts.init(chartDom); const option = { toolbox: { feature: { saveAsImage: {}, // 启用保存为图片功能 }, }, title: { text: '示例图表' }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] }, yAxis: { type: 'value' }, series: [{ data: [80, 90, 70], type: 'bar' }], }; myChart.setOption(option); }, }; </script> ``` 在此种情况下，无需额外依赖外部库，只需简单配置即可让用户提供便捷的下载入口[^1]。 --- #### 数据导出 Excel 功能扩展 对于更复杂的需求，比如将图表中的数据导出为 Excel 表格，则需先提取原始数据再借助第三方插件处理。推荐使用 `xlsx` 或其他类似的 JavaScript 库完成这一过程。 ```bash npm install xlsx --save ``` 随后，在 Vue 组件中集成如下逻辑： ```javascript import XLSX from 'xlsx'; methods: { exportToExcel() { const ws = XLSX.utils.json_to_sheet([ { day: 'Mon', value: 80 }, { day: 'Tue', value: 90 }, { day: 'Wed', value: 70 }, ]); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, '图表数据.xlsx'); // 输出文件名称 } } ``` 以上代码片段展示了如何基于 JSON 格式的源数据生成 Excel 文件。 ---