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