使用echarts将Excel的数据可视化 |
您所在的位置：网站首页 › 优衣库哪里的牌子好穿 › 使用echarts将Excel的数据可视化 |
使用echarts将Excel的数据可视化
|
目录 一、失败原因 我的解决办法： 1、因为我的数据是是事先处理好的，也不太大，所以直接复制到代码中以数组处理了。 2、数据存储再数据库中，后端读取，前端调用。 二、SheetJS 三、Excel中数据 四、成果 五、代码 一、失败原因读取Excel文件前，必须手动选择Excel文件位置，不能默认一个位置（直接写死路径）。 这是浏览器的安全限制，禁止浏览器直接读取电脑文件，必须由用户触发完成,不能由代码设置,否则会对用户数据构成威胁. web端读取电脑文件必须使用file类型的传参，不能使用地址（如D:\\a.txt），file类型来源一般是，而input file上传按钮选择文件后的value是无法直接获取到的，也无法修改， 看看下面代码会更清楚。 我的解决办法： 1、因为我的数据是是事先处理好的，也不太大，所以直接复制到代码中以数组处理了。 2、数据存储再数据库中，后端读取，前端调用。 二、SheetJS SheetJS能读取，编辑和导出Excel 可在网络浏览器和服务器中使用社区版文档：https://docs.sheetjs.com/ 三、Excel中数据time为时间格式，读取的时候转化为浮点数的格式，要手动调整。
请debug这段代码，看看file类型的数据，file.result， 和这个函数的运行次序！！！ // 读取本地excel文件 function readWorkbookFromLocalFile(file) { var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); // 处理excel文件 handle(workbook); }; reader.readAsBinaryString(file); //通过FileReader对象读取文件，利用js-xlsx转成json数据 //FileReader共有4种读取方法： //1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 //2.readAsBinaryString(file)：将文件读取为二进制字符串 //3.readAsDataURL(file)：将文件读取为Data URL //4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8' } ECharts // 读取本地excel文件 function readWorkbookFromLocalFile(file) { var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); // 处理excel文件 handle(workbook); }; reader.readAsBinaryString(file); //通过FileReader对象读取文件，利用js-xlsx转成json数据 //FileReader共有4种读取方法： //1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 //2.readAsBinaryString(file)：将文件读取为二进制字符串 //3.readAsDataURL(file)：将文件读取为Data URL //4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8' } // 处理excel文件 var date1=[]; var date2=[]; function handle(workbook) { // workbook.SheetNames[0] excel第一个sheet var datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); var title=[]; if(datas.length > 0){ // 获取列名是汇总列名，避免某行某个字段没有值，会缺少字段 // 标题 // 获取每行数据 first: for(var index in datas){ // datas数组，index为索引 second: for(var key in datas[index]){ // datas[index]对象,key为键 if (-1 === title.indexOf(key)) { title.push(key); } } } // 列名 console.log(title); // 数据 console.log(datas); //时间转化，并把datas中数据分列 for(var i=0;i |
【本文地址】
今日新闻 |
推荐新闻 |