js讀取excel文件,繪製echarts圖形---數據處理

一、基本內容介紹

• 本文是在上一篇的基礎上介紹一些經常使用的處理excel數據的方法，旨在爲遇到相似需求的時候爲你們提供解決方案。
• 這些方法都是本人在項目實踐中使用的，若有更好的方法或者不一樣的看法歡迎提出，共同窗習探討。

二、代碼介紹

• 一、數據分析

1. 上節回顧

updateFile(e) {
  let _this = this;
  let files = e.target.files;
  let fileReader = new FileReader();
  fileReader.onload = function(ev) {
    try {
      let data = ev.target.result;
      let workbook = XLSX.read(data, { type: "binary" }); // 以二進制流方式讀取獲得整份excel表格對象
      let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 這裏咱們只讀取第一張表，獲取表名（如Sheet1）
      _this.excelData = XLSX.utils.sheet_to_json(sheetName, {
        header: "A",
        raw: true,
        defval: " " // 意思是從頭開始匹配，如遇到空格，將跳過執行，並替換爲" "字符串。
      });
      console.log(_this.excelData) // excelData在data()中聲明的變量, _this.excelData就是咱們熟悉的數組數據了。
    } catch (e) {
      return _this.$message.error("文件類型不正確！");
    }
  };
  // fileReader.readAsBinaryString(files[0]); // 將文件讀取爲二進制字符串展現在頁面
}
複製代碼

2. 這裏咱們拿到了excelData數據，咱們來看一下他長什麼樣：

   

3. 根據打印數據，咱們不可貴知，excelData爲一個數組，它的每一項對應excel的行，每一項的key值對應excel的表頭A、B、C..., 數組的第一項爲表頭的標題。

• 二、數據處理

1. 構建getExcelKeys方法，獲得全部表頭數據，並刪除excelData的第一項。

getExcelKeys() {
  let row = this.totalForm.currentList[0];
  for (let key in row) {
    this.excelKey.push({
      key,
      value: row[key]
    });
  }
  console.log('this.excelKey===>', this.excelKey)
  this.excelData.splice(0, 1); // 刪除表頭
}
複製代碼

這時咱們拿到了excelKey，它是excel的列與表頭的對應關係key/value。

2. 構建getCurrentKey方法，獲取當前表頭對應的excel列。

getCurrentKey(name) {
  let key;
  this.excelKey.forEach(item => {
    if (item.value === name) {
      key = item.key;
    }
  });
  return key;
}
複製代碼

3. 獲取單個條件下的數據，如咱們想獲得收入的總和：

getTotalMoney() {
  let totalMoney = 0;
  let key = this.getCurrentKey("金額");
  this.excelData.forEach(item => {
    totalMoney = totalMoney + item[key];
  });
  this.totalMoney = parseInt(totalMoney);
}
複製代碼

• 三、獲取指定條件下的數據

1. 如咱們如今知道一月份下金額總和：

getCurrentTotalMoney() {
  let keyA = this.getCurrentKey("月份");
  let keyB = this.getCurrentKey("金額");
  let currentTotalMoney = 0;
  this.currentList = this.excelData.filter(item => item[keyA] === month) // month這裏定義爲想要獲取數據的月份
  this.currentList.forEach(item => {
    currentTotalMoney = currentTotalMoney + item[keyB];
  });
  this.currentTotalMoney = parseInt(currentTotalMoney);
}
複製代碼

2. 更復雜的場景，例如咱們想要獲取指定年份下的每月份的金額總和。如如今咱們想知道2018年1~12月每月的收入總額：

getTotalMoneyArr() {
  let keyA = this.getCurrentKey("年份");
  let keyB = this.getCurrentKey("月份");
  let keyC = this.getCurrentKey("金額");
  this.currentList = this.excelData.filter(item => item[keyA] === '2018') // 獲得2018年全部的數據
  let data = [], // 2018年1~12月每月的收入總額
  let obj = {};
  this.currentList.forEach(item => { // 下面有詳細介紹
    if (obj[item[keyB]]) {
      obj[item[keyB]] = obj[item[keyB]] + item[keyC];
    } else {
      obj[item[keyB]] = item[keyC];
    }
  });
  for (let key in obj) { // 對象屬性的遍歷
    if (key.trim() !== "") { // key.trim() === '' => 是爲了排除excel表中空數據的狀況
      data.push({
        name: key,
        value: parseInt(obj[key])
      });
    }
  }
}
複製代碼

3. 這裏順便分享一個數據去重的方式：

es6多個數組的去重
[...new Set(arr1.concat(arr2))] 或者
Array.from(new Set(arr1.concat(arr2)))

在es5中傳統的作法是先遍歷arr1，而後去到arr2查找是否存在該元素在push到新數組中，這裏咱們介紹一下利用對象的方法：
this.currentList.forEach(item => { // 這是上面咱們對每月金額求和方法
    if (obj[item[keyB]]) { // 這個對月份進行去重，把月份做爲obj的key值，判斷key是否存在。
      obj[item[keyB]] = obj[item[keyB]] + item[keyC]; // 對應的value值爲金額的求和
    } else {
      obj[item[keyB]] = item[keyC];
    }
});
複製代碼

三、總結

• 經過上述介紹的方法，在結合一些基本算法，能夠處理絕大多數的業務場景了。
• 若是有你疑問，歡迎留言。
• 接下來將會對echarts的各類配置作出詳細的介紹。