通过input上传xlsx文件，并绘制成图表，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <script src="js/xlsx.core.min.js"></script> <script src="js/echarts.min.js"></script> <title>上传excel文件并绘制成图表</title> </head> <body> <input type="file" id="file"> <div id="container" style="width: 400px; height: 400px;"></div> <script> $(\'#file\').change(function (e) { var files = e.target.files; var fileReader = new FileReader(); // 将文件内容读入内存 fileReader.onload = function (ev) { // 当读取操作成功完成时调用 // console.log(this.result); // 查看文件输出内容 try { var data = ev.target.result, //以二进制流方式读取得到表格中数据 workbook = XLSX.read(data, { type: \'binary\' }), info = [];//存储获取到的数据 } catch (e) { alert(\'文件类型不正确\'); return; } var fromTo = \'\'; //遍历每张表读取 for (var sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { fromTo = workbook.Sheets[sheet][\'!ref\']; info = info.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); } } // 添加代码 var chart = echarts.init(document.getElementById(\'container\')); var info2 = []; for (var i = 0; i < info.length; i++) { var dataX = info[i].date; var dataY = info[i].data; var data1 = [dataX, dataY]; info2.push(data1); } var infoListX = info2.map(function (item) { return item[0]; }); var infoListY = info2.map(function (item) { return item[1]; }); option = { visualMap: [{ // 视觉映射组件 show: false, type: \'continuous\', seriesIndex: 0, min: 0, max: 400 }], title: [{ left: \'center\', text: \'柱状图\' }], tooltip: { // 是否显示提示框组件 trigger: \'item\' // 触发类型 }, xAxis: [{ data: infoListX.sort() }], yAxis: [{ splitLine: { show: false } }], grid: [{ bottom: \'40\', right: \'40\', left: \'40\', top: \'60\' }], series: [{ // 系列列表 type: \'bar\', // 图表类型 showSymbol: false, data: infoListY }] }; chart.setOption(option); }; //以二进制方式打开文件 fileReader.readAsBinaryString(files[0]); }); </script> </body> </html>
1.jquery.js的下载地址：http://www.bootcdn.cn/jquery/
2. xlsx.core.min.js的下载地址：https://github.com/SheetJS/js-xlsx/tree/master/dist
3. echarts.min.js的下载地址：http://echarts.baidu.com/download.html
其中echarts是一个图表插件，也可以使用highcharts插件，至于哪个插件比较好？我只能说仁者见仁智者见智吧，看个人爱好吧