Excel表格数据生成ECharts图表

什么东西:

是这样,前些时候有个网友问我,ECharts怎么用,我说我研究研究。。。

然后就做了这么个小东西,通过html页面,选择一个有数据(固定格式)的Excel文件,根据Excel里面的数据,生成对应的ECharts图表,如折线图、柱状图。

效果如下:

其实大家仔细一看就知道Excel的数据和转换后的图表是怎么对应上的。例如:

文件名 -- 图名

首列名 -- x轴名

首列数据 -- x轴刻度

其他列名 -- 一个统计项目

其他数据 -- 数据内容

 

实现方式:

代码方面是比较简单的,读取和转换Excel数据用了GitHub的js-xlsx:https://github.com/SheetJS/js-xlsx,图表部分用的是ECharts的库https://echarts.baidu.com/

然后就是,通过选择Excel文件,读取数据,转换成ECharts要的数据格式,然后调用ECharts的功能展现出图表。

 

全部给你:

有兴趣的可以下载来玩玩,我直接上传到csdn了,可通过:根据Excel表格数据生成ECharts图表进去下载,不过这里要5积分,我也不知道怎么才能设置成免费。

没积分的话留个联系方式或者邮箱什么的我直接给你发。

压缩包里面直接打开index.html就行了,然后在页面点按钮选择Excel文件,就会自动读取并生成图表。

压缩包里面有个Excel模板的文件夹,里面有两个我测试用的Excel,你们也可以参考着玩。

写得比较简单,bug还是不少的,自己也可以看着修改着玩。

 

最后:

小仙女考试顺利~

我也考试顺利~

 

-------------2019年7月1日更新--begin----------------------------------------------------------------------

是酱紫吼,上周的时候有个小伙伴说想要个饼图的,所以翻出了老代码,一番折腾,加了个饼图的按钮。

效果如下,注意Excel与饼图的数据对应关系 :

然后,新的整个项目已经传到csdn了,有需要的话可以下载,或者留言邮箱。

资源:根据Excel表格数据生成ECharts图表 V2.3

-------------2019年7月1日更新--end!----------------------------------------------------------------------

-------------20210408更新,项目上传到github了,内容无更新,有需要可以直接取github下载-------------

https://github.com/itlihy/ExcelToECharts

### 将Excel数据导入ECharts实现图表展示 为了将Excel中的数据成功导入并利用ECharts进行可视化展示,整个过程涉及几个关键技术环节:选择和读取Excel文件、解析其内容至适合ECharts使用的JSON格式以及最终渲染图表。 #### 文件上传与读取 HTML页面需设置一个用于接收用户上传的Excel文件<input>标签。当用户选择了目标文件之后,借助FileReader API来异步加载该文件的内容[^2]。 ```html <input type="file" id="upload-file"> ``` 一旦文件被选中,可以通过监听`change`事件触发后续处理逻辑: ```javascript document.getElementById('upload-file').addEventListener('change', function(event){ var file = event.target.files[0]; }); ``` #### 解析Excel数据 对于已上传的Excel文件,推荐采用SheetJS (即xlsx.js)库来进行高效的数据解析工作。此库能够方便地把Excel表单转化为JavaScript对象数组形式,便于进一步加工处理[^3]。 具体来说,在获取到文件实例后,先将其转码为二进制字符串再传递给XLSX.read()方法完成实际解析动作;随后调用sheet_to_json函数即可得到结构化的JSON表示法: ```javascript var reader = new FileReader(); reader.onload = function(e) { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, {type:'array'}); // 假设只关注第一个工作簿内的数据 let first_sheet_name = workbook.SheetNames[0]; /* 获取指定的工作表 */ let worksheet = workbook.Sheets[first_sheet_name]; // 转换成json格式 const jsonData = XLSX.utils.sheet_to_json(worksheet); }; reader.readAsArrayBuffer(file); ``` #### 准备ECharts所需的数据格式 根据所期望绘制的具体图形类型(折线图柱状图等),可能需要对原始JSON数据做适当调整以匹配ECharts组件的要求。比如提取特定列作为横坐标轴或系列名称,并整理数值部分形成series项下的data字段值集合[^1]。 假设原生Excel文档内含两列表示时间戳及其对应的销售金额,则转换后的适配版JSON片段可能是这样的样子: ```json { "categories": ["Jan", "Feb", "Mar"], "series": [ {"name":"Sales","data":[150, 230, 224]} ] } ``` #### 初始化并配置ECharts实例 最后一步是在DOM容器中初始化一个新的ECharts实例,并通过option参数设定好标题、提示框样式、x/y轴刻度划分规则等一系列外观属性,同时指明先前准备好的数据源位置以便于绘图引擎正确呈现图像效果[^4]。 ```javascript // 基于准备完毕的数据创建echarts实例 let myChart = echarts.init(document.querySelector('#main')); myChart.setOption({ title : { text: '月销售额统计' }, tooltip : { trigger: 'axis' }, xAxis : [{ type : 'category', boundaryGap : false, data : ['Mon', 'Tue', 'Wed'] }], yAxis : [{ type : 'value' }], series : [{ name:'销量', type:'line', stack: '总量', areaStyle: {}, data:[120, 132, 101] }] }); ``` 上述流程概述了从选取Excel文件直至在网页界面上动态生成相应图表的整体步骤。值得注意的是,实际开发过程中还需考虑异常情况捕获机制的设计,确保程序健壮性和用户体验友好性。
评论 388
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值