亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

joy968 / 2573人閱讀

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

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

前言

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

依賴

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

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

echarts 一個(gè)生成各種報(bào)表的庫(kù)

數(shù)據(jù)導(dǎo)入

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

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

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

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

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

tips: 需要注意的是 readXxxxx() 函數(shù),是不直接返回讀取結(jié)果的,因?yàn)樽x取這個(gè)動(dòng)作異步的.

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

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ù),里面包含上面說(shuō)的很多種數(shù)據(jù),而正常情況下,
我們需要的往往只是第一個(gè) sheet 里面的 純數(shù)據(jù), 所以調(diào)用 XLSX.utils.sheet_to_json
獲取第一個(gè) sheet 的數(shù)據(jù), table 拿到的應(yīng)該是一個(gè)我們熟悉的數(shù)組了.這個(gè)時(shí)候如果你只是單純的渲染的話,
你甚至可以就此打住,自己寫(xiě)一個(gè)渲染方法(比如字符串拼接哈)把數(shù)據(jù)渲染出來(lái)即可.

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

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

首先當(dāng)然是安裝,我的項(xiàng)目是基于 vue 的,所以要安裝 vue 版本的,其他框架的,只要安裝響應(yīng)的版本即可.

npm i @handsontable/vue

然后就可以直接這么用

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

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

生成報(bào)表

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

為了偷懶降低復(fù)雜度，我這里只提供了3種報(bào)表類型供選擇,分別是 餅圖，柱狀圖，折線圖，稍微分析 echart 的配置手冊(cè)，我發(fā)現(xiàn)各種類型的圖表，
其實(shí)主要的區(qū)別在 series 配置項(xiàng)下面，其他位置幾乎沒(méi)啥區(qū)別 就算有區(qū)別，也被我無(wú)視 。最終的實(shí)現(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ù)是采用追加的方式加進(jìn)去的，類似 javascript 的 Object.assign(),
所以如果新的數(shù)據(jù)沒(méi)辦法完全覆蓋掉就舊的數(shù)據(jù)的話，舊的那些沒(méi)有被覆蓋掉的數(shù)據(jù)，還會(huì)渲染出來(lái). 我對(duì)這種情況的處理方法是調(diào)用 dispose.dispose() 把實(shí)例銷毀掉，
然后重新創(chuàng)建一個(gè)新實(shí)例，設(shè)置新的 option
最后

源碼記得star 和follow哦。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97890.html

相關(guān)文章

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

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

    Channe 評(píng)論0 收藏0

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

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

    zgbgx 評(píng)論0 收藏0

  • Handsontable 類似 excel 表格編輯器

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

    ztyzz 評(píng)論0 收藏0

  • Handsontable 類似 excel 表格編輯器

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

    villainhr 評(píng)論0 收藏0

  • 12個(gè)值得關(guān)注的頂級(jí)可視化JS庫(kù) 涉及圖表、動(dòng)畫(huà)、時(shí)間處理，表格操作

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

    JinB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<