js解析Excel文件，解析后的数据用Echarts折线图展示

来源：互联网发布：盲僧李小龙皮肤淘宝编辑：程序博客网时间：2024/06/06 13:43
不多说了，直接上代码
<!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>
效果预览：
阅读全文
0 0