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

栏目: 数据库 · 发布时间: 5年前

内容简介:这时我们拿到了excelKey,它是excel的列与表头的对应关系key/value。2. 构建getCurrentKey方法,获取当前表头对应的excel列。
  • 本文是在上一篇的基础上介绍一些常用的处理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的各种配置做出详细的介绍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP for the World Wide Web, Second Edition (Visual QuickStart Gu

PHP for the World Wide Web, Second Edition (Visual QuickStart Gu

Larry Ullman / Peachpit Press / 2004-02-02 / USD 29.99

So you know HTML, even JavaScript, but the idea of learning an actual programming language like PHP terrifies you? Well, stop quaking and get going with this easy task-based guide! Aimed at beginning ......一起来看看 《PHP for the World Wide Web, Second Edition (Visual QuickStart Gu》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具