js讀取excel檔案,繪製echarts圖形---資料處理

SilentLove發表於2018-12-16
JSExcelEcharts

1、基本內容介紹

  • 本文是在上一篇的基礎上介紹一些常用的處理excel資料的方法，旨在為遇到類似需求的時候為大家提供解決方案。
  • 這些方法都是本人在專案實踐中使用的，如有更好的方法或者不同的見解歡迎提出，共同學習探討。

2、程式碼介紹

  • 1、資料分析
  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]); // 將檔案讀取為二進位制字串展示在頁面
}
複製程式碼
  1. 這裡我們拿到了excelData資料，我們來看一下他長什麼樣：
    js讀取excel檔案,繪製echarts圖形---資料處理
  2. 根據列印資料，我們不難得知，excelData為一個陣列，它的每一項對應excel的行，每一項的key值對應excel的表頭A、B、C..., 陣列的第一項為表頭的標題。
  • 2、資料處理
  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。

js讀取excel檔案,繪製echarts圖形---資料處理
2. 構建getCurrentKey方法，獲取當前表頭對應的excel列。

getCurrentKey(name) {
  let key;
  this.excelKey.forEach(item => {
    if (item.value === name) {
      key = item.key;
    }
  });
  return key;
}
複製程式碼
  1. 獲取單個條件下的資料，如我們想得到收入的總和：
getTotalMoney() {
  let totalMoney = 0;
  let key = this.getCurrentKey("金額");
  this.excelData.forEach(item => {
    totalMoney = totalMoney + item[key];
  });
  this.totalMoney = parseInt(totalMoney);
}
複製程式碼
  • 3、獲取指定條件下的資料
  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);
}
複製程式碼
  1. 更復雜的場景，例如我們想要獲取指定年份下的每個月份的金額總和。如現在我們想知道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])
      });
    }
  }
}
複製程式碼
  1. 這裡順便分享一個資料去重的方式：
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];
    }
});
複製程式碼

3、總結

  • 通過上述介紹的方法，在結合一些基本演算法，可以處理絕大多數的業務場景了。
  • 如果有你疑問，歡迎留言。
  • 接下來將會對echarts的各種配置做出詳細的介紹。

相關文章