成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js-xlsx + handsontable + echarts實現(xiàn)excel上傳編輯然后顯示成圖表

joy968 / 2496人閱讀

摘要：生成報表數(shù)據(jù)都處理完了之后，就是生成報表了，報表這里稍微做的靈活了一點，是要讓用戶根據(jù)上傳的數(shù)據(jù)，自己選擇字段，然后用去生成對應的報表。

js-xlsx + handsontable + echarts 實現(xiàn)在前端導入excel數(shù)據(jù)并生成echart報表

前言

最近都在做類似 ERP 的項目,所以呢,又碰到一個比較{{BANNED}}的需求(至少對我來說是),在前端導入 excel 文件,
然后在瀏覽器里面預覽和編輯,　最后再選擇一些數(shù)據(jù),用echarts生成報表.

依賴

js-xlsx 讀取excel數(shù)據(jù)到j(luò)s

handsontable 類似Excel一樣顯示和編輯列表數(shù)據(jù)

echarts 一個生成各種報表的庫

數(shù)據(jù)導入

數(shù)據(jù)導入這邊需要用到 瀏覽器的 FileReader對象 的 readAsBinaryString() 函數(shù), 把選擇的文件讀取出來,
然后再監(jiān)聽 FileReader 對象的 onload 事件 , 在 onload 事件 的回調(diào)函數(shù)中,我們可以獲取到 讀取的二進制數(shù)據(jù).
這里順便提一下, FileReader 對象提供以下方法,用來讀取各種格式的數(shù)據(jù)(參考自MDN)

FileReader.readAsArrayBuffer() // 讀取文件的 ArrayBuffer 數(shù)據(jù)對象.

FileReader.readAsBinaryString() // 讀取文件的原始二進制數(shù)據(jù)

FileReader.readAsDataURL() // 返回一個URL格式的字符串以表示所讀取文件的內(nèi)容

FileReader.readAsText() // 返回一個字符串以表示所讀取的文件內(nèi)容

tips: 需要注意的是 readXxxxx() 函數(shù),是不直接返回讀取結(jié)果的,因為讀取這個動作異步的.

readAsBinaryString 讀取到的內(nèi)容應該是一個二進制的字符串,這個時候,需要調(diào)用 js-xlsx
的 read 方法, read 返回的是一個可讀性很強的對象了,我看了一下,里面有關(guān)于表格的屬性很多都有
,如 樣式, vsb宏, sheets等等 (反正我對excel也不熟,認識的也就這些哈),

npm i xlsx
import XLSX from "xlsx"
...
let res = XLSX.read(data, {type: "binary"})
let sheetName = res.Sheets[res.SheetNames[0]]
let table = XLSX.utils.sheet_to_json(sheetName, {header: "A", raw: true, defval: " "})

這里的 res 得到的我猜是 excel 表格原有的數(shù)據(jù),里面包含上面說的很多種數(shù)據(jù),而正常情況下,
我們需要的往往只是第一個 sheet 里面的 純數(shù)據(jù), 所以調(diào)用 XLSX.utils.sheet_to_json
獲取第一個 sheet 的數(shù)據(jù), table 拿到的應該是一個我們熟悉的數(shù)組了.這個時候如果你只是單純的渲染的話,
你甚至可以就此打住,自己寫一個渲染方法(比如字符串拼接哈)把數(shù)據(jù)渲染出來即可.

如果單純的顯示無法滿足你的需求,那么你可能需要 handsontable 了.

tips: sheet_to_json 的 第二個參數(shù)里面的 header，可以傳數(shù)字，也可以轉(zhuǎn) "A", 兩個的主要區(qū)別在于轉(zhuǎn)化出來的表第一行如果是空行會不會正常顯示，
傳 "A" 會正常顯示，傳數(shù)字的話，如果表格的第一行有空白單元格，表格會錯亂。
數(shù)據(jù)展示

首先當然是安裝,我的項目是基于 vue 的,所以要安裝 vue 版本的,其他框架的,只要安裝響應的版本即可.

npm i @handsontable/vue

然后就可以直接這么用

模板里面的 settings 是 handsontable 的一些配置, 每個項目的需求不同,配置也不同,這里就不列舉出來了, 上面獲取到的 table 在這里要賦值給 settings.data

我這里用 handsontable 顯示數(shù)據(jù)的目的，是讓用戶可以清晰的看到上傳的表的數(shù)據(jù)和結(jié)構(gòu)，可以刪除屌部分無用的數(shù)據(jù)，減少冗余。

生成報表

數(shù)據(jù)都處理完了之后，就是生成報表了， 報表這里稍微做的靈活了一點，是要讓用戶根據(jù)上傳的數(shù)據(jù)，自己選擇字段，然后用 echart 去生成對應的報表。

為了偷懶降低復雜度，我這里只提供了3種報表類型供選擇,分別是 餅圖，柱狀圖，折線圖，稍微分析 echart 的配置手冊，我發(fā)現(xiàn)各種類型的圖表，
其實主要的區(qū)別在 series 配置項下面，其他位置幾乎沒啥區(qū)別 就算有區(qū)別，也被我無視 。最終的實現(xiàn)大概是這樣

let option = {
  title: {...},
  tooltip: {...},
  xAxis: {...},
  yAxis: {...},
  toolbox: {...},
}

switch (type) {
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
}

myChart.setOption(option)
echart 第一次渲染完以后，如果改變 option 的數(shù)據(jù)然后重新渲染，新的 option 數(shù)據(jù)是采用追加的方式加進去的，類似 javascript 的 Object.assign(),
所以如果新的數(shù)據(jù)沒辦法完全覆蓋掉就舊的數(shù)據(jù)的話，舊的那些沒有被覆蓋掉的數(shù)據(jù)，還會渲染出來. 我對這種情況的處理方法是調(diào)用 dispose.dispose() 把實例銷毀掉，
然后重新創(chuàng)建一個新實例，設(shè)置新的 option
最后

源碼記得star 和follow哦。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97890.html

相關(guān)文章

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

  • Handsontable 類似 excel 表格編輯器

    摘要：原文發(fā)布于個人博客歡迎訪問簡介是一個類似表格編輯器，支持豐富的展現(xiàn)和交互，以及多樣的單元格展現(xiàn)和配置核心由原生編寫，通過打包同類項目中，點贊最多，列表官網(wǎng)地址支持的特征的一些主要功能這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這 原文發(fā)布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器，支持豐富的展現(xiàn)和交互...

    ztyzz 評論0 收藏0

  • Handsontable 類似 excel 表格編輯器

    摘要：原文發(fā)布于個人博客歡迎訪問簡介是一個類似表格編輯器，支持豐富的展現(xiàn)和交互，以及多樣的單元格展現(xiàn)和配置核心由原生編寫，通過打包同類項目中，點贊最多，列表官網(wǎng)地址支持的特征的一些主要功能這里只列出主要功能，想了解更多更能，可以查詢官方文檔。這 原文發(fā)布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器，支持豐富的展現(xiàn)和交互...

    villainhr 評論0 收藏0

  • 12個值得關(guān)注的頂級可視化JS庫 涉及圖表、動畫、時間處理，表格操作

    摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數(shù)據(jù)驅(qū)動文檔通常被稱為最強大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。 本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎(chǔ)上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表...

    JinB 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<