Ajax读取本地的excel数据表数据，填入到HTML网页中，HTML中不同的echarts图像，获取不同的数据。附完整源码

以下是一个简单的示例代码，演示如何使用Ajax读取本地Excel数据，并将其填充到echarts图表中。请注意，这个示例仅适用于Chrome浏览器，其他浏览器可能需要一些额外的配置。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Ajax读取本地Excel数据</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script> </head> <body> <div id="chart1"></div> <div id="chart2"></div> <script src="script.js"></script> </body> </html> ``` JavaScript代码： ```js $(function() { // 读取本地Excel文件 var file_path = 'data.xlsx'; var oReq = new XMLHttpRequest(); oReq.open("GET", file_path, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { var arraybuffer = oReq.response; // 将Excel文件转换为JSON格式 var data = XLSX.read(arraybuffer, {type:"array"}); var sheet_name_list = data.SheetNames; var json_data = XLSX.utils.sheet_to_json(data.Sheets[sheet_name_list[0]]); // 填充图表数据 echarts.init(document.getElementById('chart1')).setOption({ xAxis: { type: 'category', data: json_data.map(function(item) { return item['日期'] }) }, yAxis: { type: 'value' }, series: [{ data: json_data.map(function(item) { return item['销售额'] }), type: 'line' }] }); echarts.init(document.getElementById('chart2')).setOption({ xAxis: { type: 'category', data: json_data.map(function(item) { return item['日期'] }) }, yAxis: { type: 'value' }, series: [{ data: json_data.map(function(item) { return item['利润'] }), type: 'bar' }] }); }; oReq.send(); }); ``` 请注意，这个示例使用了jQuery和ECharts库，同时还使用了一个名为"xlsx.full.min.js"的库，用于将Excel文件转换为JSON格式。你需要在HTML代码中引入这些库，才能运行这个示例。

阅读全文

Ajax读取本地的excel数据表数据，填入到HTML网页中，HTML中不同的echarts图像，获取不同的数据。附完整源码

最新推荐

ajax动态获取数据库中的数据方法

ajax接收后台数据在html页面显示

在django项目中导出数据到excel文件并实现下载的功能

ThinkPHP中使用ajax接收json数据的方法

ajax获取json数据为undefined原因分析

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程