近期在做一个项目时涉及到数据统计功能，统计结果用数字直接显示不醒目，而且浏览起来也不美观，所以考虑用图形来展示，通常用的有曲线图、柱状图和饼状图等图形，综合整体对比效果，最终选择了饼状图来做展示，现在将实现的代码和原理展示给大家，如果要用其它的图形大家可以自行来修改。
首先我们来看最终的效果：
现在将整个过程代码分享给大家，供大家参考。
首先，为了将excel数据绘制成echarts图表，前端得拿到excel数据。
这里我们借助js-xlsx.js库，安装xlsx:
cnpm i -S xlsx
你也可以cdn的方式直接引用：
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
首先你需要读取excel文件：
<input type="file" id="excel-file">
添加响应事件change获取excel数据：
<input type="file" id="excel-file" @change="updateFile">
通过updateFile接受数据
updateFile(e) {
let files = e.target.files;
console.log(files)
}
得到files，说明我们已经获取到上传的excel文件。现在我们需要将files转化成我们熟悉的数组类型。 我们使用fileReader方法。
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
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]); // 将文件读取为二进制字符串展示在页面
}
excel多张表格的处理：
var fromTo = '' // 表格范围，可用于判断表头数量是否正确
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'] // 表头数量
_this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]), {
header: 'A',
raw: true,
defval: ' '
})
}
}
通过以上代码就可以实现我们之前展示的饼状图效果了，如果你看了后喜欢的话记得收藏哦！
网站