以下是一个简单的示例代码，演示如何使用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代码中引入这些库，才能运行这个示例。
扫一扫
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
