一、失败原因

读取Excel文件前，必须手动选择Excel文件位置，不能默认一个位置（直接写死路径）。

这是浏览器的安全限制，禁止浏览器直接读取电脑文件，必须由用户触发完成,不能由代码设置,否则会对用户数据构成威胁.

web端读取电脑文件必须使用file类型的传参，不能使用地址（如D:\\a.txt），file类型来源一般是<input type="file" name="file" />，而input file上传按钮选择文件后的value是无法直接获取到的，也无法修改，

看看下面代码会更清楚。

我的解决办法：

1、因为我的数据是是事先处理好的，也不太大，所以直接复制到代码中以数组处理了。

2、数据存储再数据库中，后端读取，前端调用。

二、SheetJS

SheetJS能读取，编辑和导出Excel

可在网络浏览器和服务器中使用

社区版文档：https://docs.sheetjs.com/

三、Excel中数据

time为时间格式，读取的时候转化为浮点数的格式，要手动调整。

四、成果

五、代码

<!--input file打开文件选择框，获取文件信息，并传参给readWorkbookFromLocalFile函数-->
<form><input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
</form>

请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'
}

<!--这是一个网上关于读取Excel最经典的代码-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="newjs/js/incubator-echarts-4.8.0/dist/echarts.min.js"></script><script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script><script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head><body >
<!--input file打开文件选择框，获取文件信息，并传参给readWorkbookFromLocalFile函数-->
<form><input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:350px;"></div><script type="text/javascript">// 读取本地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第一个sheetvar 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<datas.length;i++){var a=datas[i].time*24;var b=(a-parseInt(a))*60;var c=(b-parseInt(b))*60;date1[i]=parseInt(a).toString()+":"+parseInt(b).toString()+":"+parseInt(c).toString();date2[i]=datas[i].sum;}console.log(date1);console.log(date2);aaa();}}</script>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例function aaa(){var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据option = {tooltip: {trigger: 'axis',position: function (pt) {return [pt[0], '10%'];}},title: {left: 'center',text: '大数据量面积图',},toolbox: {feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: date1},yAxis: {type: 'value',boundaryGap: [0, '100%']},dataZoom: [{type: 'inside',start: 0,end: 10}, {start: 0,end: 10,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2}}],series: [{name: '人流量',type: 'line',smooth: false,symbol: 'none',itemStyle: {color: 'rgb(255, 70, 131)'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 158, 68)'}, {offset: 1,color: 'rgb(255, 70, 131)'}])},data: date2}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}</script>
</body>
</html>

使用echarts将Excel的数据可视化相关推荐

别用Excel做数据可视化了！这款报表工具不比它香100倍？
昨天朋友聚餐,做报表的张哥在饭桌上吐槽,说现在的报表工程师太难了,不仅要会敲代码,还要会做视觉设计. 我们感到很纳闷,为什么? 他说没想到公司里上司和同事们都是"颜控",对报表也有 ...
Excel实现数据可视化
Excel实现数据可视化文章目录 Excel实现数据可视化制作气象站气温变化折线图知识点: 新建文件夹及excel表格制作气象站气温变化折线图背景: 一天的天气变幻莫测,早晚温差也很大,因此 ...
Python入门到实战（五）自动化办公、pandas操作Excel、数据可视化、绘制柱状图、操作Word、数据报表生成、pip install国内镜像下载
Python入门到实战(五)conda使用.pandas操作Excel.数据可视化.绘制柱状图.操作Word.数据报表生成.pip install国内镜像下载 conda使用常用操作配置VS+Co ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
python与excel做数据可视化-python做可视化数据分析，究竟怎么样？
Python做可视化数据分析也是可以的,只是对比起来专业的可视化工具有些得不应手,做出来的图可能不太美观.Python用来处理数据,用来分析绝对可以.我觉得想要可视化可以使用专门的可视化工具. 不过, ...
python与excel做数据可视化-Python的Excel操作及数据可视化
Excel表操作 python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 安装xlrd pip install xlrd 简单的表格读取 ...
echarts tab切换_Python 数据可视化实战：使用 PyQt5 和 Echarts 打造股票数据看板
月小水长一个编码者.思考者在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表在一份项目路演ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂作为数据分析最后也是最直接的一环,数据可视 ...
python与excel做数据可视化-我在工作中是怎么玩数据的—数据可视化系列教程—Python篇...
一. 为什么是Python? Python现在已经成为数据科学的语言!基于 Python 代码实现批量化,流程化的数据探索与汇报!按照地产大佬***的话讲--就是重复性的工作直接用Python搞定就可 ...

使用echarts将Excel的数据可视化