前言
如今各類BI產品大行其道，“數據可視化”成爲一個熱門詞彙。相比價格高昂的各種BI軟件，用Excel來製作動態報表就更加經濟便捷。今天小編就將爲大家介紹一下如何使用葡萄城公司的純前端表格控件——SpreadJS來實現一個Excel動態報表：
實現步驟
1.在原始數據的基礎上生成數據透視表
製作這樣的數據大屏首先必須要明確目的，比如在這裏圍繞銷售金額製作一個數據大屏，首先點擊數據源，然後點擊插入找到數據透視表，隨後將年份放在行字段，然後將銷售金額放在值字段，因爲在這裏數值比較大，可以選擇銷售金額這一列數據，然後按快捷鍵Ctrl 1調出格式窗口，點擊自定義，將類型設置爲0!.0,這樣的話就變爲了萬元顯示，然後在設計中找到總計，選擇對行和列禁用，將數據透視表中的總計禁用掉。
2.根據數據生成圖表
選擇數據區域，然後在圖表中找到餅圖，隨後爲餅圖添加數據標籤，緊接着點擊標籤按Ctrl + 1調出格式窗口，勾選類別名稱然後將分隔符設置爲新的文本行，最後將無用的圖例刪掉即可，至此的第一個圖表就製作完畢了。
爲了添加更多圖表，複製剛纔設置的數據透視表，在複製的數據透視表中將年份這個字段拖走，然後將省份這個字段放在行字段，最後將數字更改爲萬元顯示，然後插入一個橫向的條形圖，將無用的圖例刪除掉即可。需要注意的是，你需要設置幾個圖表，就需要複製幾次數據透視表，更改爲自己需要的字段，最後插入圖表，在這裏就以3個爲例跟大家演示製作方法。
爲了讓多張圖表能夠聯動變化，點擊數據透視表，在工具欄中找到插入切片器，然後分別勾選，年份，省份，廠商點擊確定，這樣的話就插入了3個切片器，隨後將他們更改下大小放在合適的位置即可。隨後點擊一個切片器，在切片器選項中選擇鏈接到報表，勾選其他的兩個報表即可，以此類推，其餘的2個切片器也需要這樣設置，設置完畢後就製作完畢了。
至此，一張簡單的可視化數據報表就製作好了。有時候，製作好的可視化報表需要通過網絡讓更多的人查閱，那麼有什麼好辦法呢？
實現在線化
下面小編爲大家介紹如何使用藉助SpreadJS實現在線化查看：
首先打開SpreadJS的學習指南：
按照學習指南上的代碼進行編程實踐：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Spread-CDN</title>
<link rel='icon' href='./assets/images/logo.png' type='image/x-icon'>
<link
href='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
rel='stylesheet' type='text/css' />
<script type='text/javascript'
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/dist/gc.spread.sheets.all.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js'></script>
<script
src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js'></script>
<script>
GC.Spread.Common.CultureManager.culture('zh-cn')
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
overflow: hidden;
}
#spread-container {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<input type="file" id="file"/>
<div id='app'>
<div id='spread-container'></div>
</div>
<script>
const spread = new GC.Spread.Sheets.Workbook('spread-container')
let sheet = spread.getActiveSheet()
const fileElement = document.querySelector('#file')
fileElement.addEventListener('change', function (e) {
const file = e.target.files[0]
spread.import(file, ()=>{
fileElement.style.display = 'none'
})
})
</script>
</body>
</html>
這裏使用<input type="file" />來選擇本地文件，在成功導入後將該元素隱藏，以便在全屏預覽報表時沒有多餘元素干擾。想導入其他模板時，只需刷新頁面，用來選擇模板文件的按鈕就又出現了。
最後導入在Excel中製作好的報表模板，一張可在線瀏覽的動態Excel報表就大功告成了。
總結
文章只是簡單演示，沒有加複雜的樣式，如果您想做出更好的顯示效果，可以充分調用自己的藝術細胞，做出更加美觀炫酷的動態報表，甚至做一個數據大屏也是可以實現的，如果您對的SpreadJS感興趣的話，也歡迎訪問SpreadJS官網。