js读取excel文件,绘制echarts图形---数据处理

1、基本内容介绍

本文是在上一篇的基础上介绍一些常用的处理excel数据的方法，旨在为遇到类似需求的时候为大家提供解决方案。
这些方法都是本人在项目实践中使用的，如有更好的方法或者不同的见解欢迎提出，共同学习探讨。

2、代码介绍

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]); // 将文件读取为二进制字符串展示在页面
}

这里我们拿到了excelData数据，我们来看一下他长什么样：
根据打印数据，我们不难得知，excelData为一个数组，它的每一项对应excel的行，每一项的key值对应excel的表头A、B、C..., 数组的第一项为表头的标题。

2、数据处理

构建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;
}

获取单个条件下的数据，如我们想得到收入的总和：

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

3、获取指定条件下的数据

如我们现在知道一月份下金额总和：

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);
}

更复杂的场景，例如我们想要获取指定年份下的每个月份的金额总和。如现在我们想知道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])
      });
    }
  }
}

这里顺便分享一个数据去重的方式：

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