在前端開發領域，表格一直都是一個高頻使用的元件，尤其是在中背景和資料分析場景下。但當一屏展示資料超過1000條資料記錄時，會出現浏覽器卡頓等問題，嚴重影響客戶體驗。為解決這些性能問題，不少元件也提出了相關的解決方案，以ElementPlus為例，提出了虛拟化表格的概念來流暢的展示更多的資料，但該功能目前仍在測試中，投入生産環境可能會有一定的風險，是以本文不做更多的介紹，大家有興趣可以參考虛拟化表格。
本文介紹一款純前端的表格控件SpreadJS，具有高度類Excel操作行為及高性能的資料展示處理性能，在類Excel業務需求實作及大資料展示方面有較好的使用體驗。相關的性能體驗可以參考：性能示範應用。同時，官方具備大量的學習資料及成熟的技術配套服務，隻要掌握基礎的前端開發技能，就可以輕松上手SpreadJS。本文以Vue3架構為例，簡要介紹如何使用SpreadJS來做資料分析及可視化展示。
産品內建完成之後，接下來我們一起來了解SpreadJS中關于資料展示及可視化分析的相關功能點。
（1）資料透視表
SpreadJS作為類Excel表格控件，具備與Excel高度一緻的功能，而在Excel中，用來做資料分析的一個關鍵功能就是資料透視表。同理，在SpreadJS中也可以使用透視表來做資料分析。
SpreadJS對透視表提供了UI操作與API，我們可以根據實際需求選擇使用UI還是API。UI操作上與Excel操作透視表一緻，如下所示，我們可以導入一張包含透視資料源的excel檔案，之後基于該資料源，選擇行列分析次元，生成目标透視表：
怎麼樣，是不是操作十分簡單，隻需簡單幾步，就可以将excel的透視表功能遷移到Web端。作為前端控件，SpreadJS也提供了API來支援透視表展示，詳細的API說明可參考學習指南-透視表。
（2）集算表
集算表是SpreadJS V15.0之後提出的一個新的功能點，該功能可根據請求接口傳回資料，快速生成結構化視圖展示。支援資料驗證，條件格式等常見Excel操作，并且多資料源之間支援連接配接，類似于資料庫表之間的外聯關系。集算表UI操作如下：
集算表-自動同步
視訊中的所有接口由Postman模拟生成，實際項目中，可根據自己的業務情況填寫接口。作為前端控件，SpreadJS不會限制接口傳回資料來源，可以來自關系型資料庫MySQL，SQL Server，也可以來自Redis、Mongodb等其它非關系型資料庫，當然，也可以來自OA，CRM等其它業務系統。
資料到達前端之後，也可對有關聯關系的兩張表做連接配接展示分析：