java script_js解析Excel文件，解析后的数据用Echarts折线图展示
把excel文件导入后，转换成jason格式，在网页显示
转换成json格式写个数据重组然后传给echarts生成图形
https://blog.csdn.net/qq_28529373/article/details/78531395
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js解析Excel</title>
<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
<script type="text/javascript" src="js/xlsx.full.min.js"></script>
<script type="text/javascript" src="js/echarts3.0.js" ></script>
</head>
<body>
<input type="file" id="excel-file" />
<div id="demo" style="width: 100%; height: 900px;"></div>
</body>
<script>
$('#excel-file').change(function(e){
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev){
try {
var data = ev.target.result,
//以二进制流方式读取得到整份excel表格对象
workbook = XLSX.read(data, {type : 'binary'}),
persons = [];//存储获取到的数据
} catch (e) {
console.log('文件类型不正确');
return;
}
//表格的表格范围，可用于判断表头数量是否正确
var fromTo = '';
//遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
//break; //如果只取第一张表，就取消注释这行
}
}
debugger;
console.log(persons);
var chart = echarts.init(document.getElementById('demo'));
var data2 = [];
for(var i = 0; i < persons.length; i++){
var dates = persons[i].date;
var datas = persons[i].data;
var data1 = [dates, datas];
data2.push(data1);
}
var dateList = data2.map(function (item) {
return item[0];
});
var valueList = data2.map(function (item) {
return item[1];
});
option = {
// Make gradient line here
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}],
title: [{
left: 'center',
text: '折线图'
}],
tooltip: {
trigger: 'axis'
},
xAxis: [{
data: dateList.sort()
}],
yAxis: [{
splitLine: {show: false}
}],
grid: [{
bottom: '3%',
right: '2%',
left: '2%',
top: '10%'
}],
series: [{
type: 'line',
showSymbol: false,
data: valueList
}]
};
chart.setOption(option);
};
//以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
</html>