阅读 1141

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

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数据,我们来看一下他长什么样:
  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。

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的各种配置做出详细的介绍。
关注下面的标签,发现更多相似文章
评论