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 文件。