ECharts图表导出功能怎么用

ECharts图表导出功能可以通过以下几种方法实现：

1. 导出为图片：

   • 使用 getDataURL 方法获取图表的 Base64 编码的图片 URL。
   • 创建一个隐藏的 <a> 标签，将其 href 属性设置为生成的图片 URL，并设置 download 属性以提供下载选项。
   • 调用 click() 方法触发下载操作。

   function exportChart() {
       var url = myChart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
       var link = document.createElement('a');
       link.href = url;
       link.download = 'chart.png';
       link.style.display = 'none';
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
   }
   

2. 导出为Excel：

   • 使用 exceljs 和 FileSaver 库将图表数据转换为 Excel 文件。
   • 创建一个新的工作簿，并将图表数据转换成表格形式后插入到工作表中。

   import * as XLSX from 'xlsx';
   import FileSaver from 'file-saver';
   
   function exportToExcel() {
       const chartData = myChart.getData();
       const worksheetName = "Chart Data";
       const workbook = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet([chartData]), worksheetName);
       const xlsxBuffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' });
       saveAs(new Blob([xlsxBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), 'exported_chart.xlsx');
   }
   

3. 导出为PDF：

   • 使用 html2canvas 将图表转换为 canvas。
   • 使用 jspdf 将 canvas 转换为 PDF 并下载。

   import html2canvas from 'html2canvas';
   import jsPDF from 'jspdf';
   
   function exportToPDF() {
       html2canvas(document.getElementById('chart'), { useCORS: true }).then(canvas => {
           const imgData = canvas.toDataURL('image/png');
           const pdf = new jsPDF('p', 'mm', 'a4');
           pdf.addImage(imgData, 'PNG', 0, 0);
           pdf.save('chart.pdf');
       });
   }
   

这些方法可以帮助你在前端项目中方便地将 ECharts 图表导出为图片、Excel 和 PDF 文件。