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的各类配置作出详细的介绍。