Ajax读取本地的excel数据表数据,填入到HTML网页中,HTML中不同的echarts图像,获取不同的数据
时间: 2024-03-27 14:39:36 浏览: 51
Ajax动态获取数据 ECHARTS图表
5星 · 资源好评率100%
可以通过以下步骤实现:
1. 使用JavaScript中的XMLHttpRequest对象进行AJAX请求,从本地读取Excel数据表数据。
2. 将获取到的数据进行解析,并根据需要转换为JSON格式。
3. 使用JavaScript中的ECharts库,根据不同的图表需求,创建不同类型的图表对象,并将数据填充到相应的图表中。
以下是一个示例代码,可供参考:
```javascript
// AJAX请求读取Excel数据表数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xlsx', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var data = new Uint8Array(xhr.response);
var workbook = XLSX.read(data, {type: 'array'});
// 解析Excel数据表数据
var sheet = workbook.Sheets[workbook.SheetNames[0]];
var json_data = XLSX.utils.sheet_to_json(sheet);
// 填充数据到不同的ECharts图表中
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// 创建图表选项并填充数据
var option1 = {
title: {
text: '图表1'
},
xAxis: {
type: 'category',
data: json_data.map(function(item) {
return item.date;
})
},
yAxis: {
type: 'value'
},
series: [{
data: json_data.map(function(item) {
return item.value1;
}),
type: 'line'
}]
};
var option2 = {
title: {
text: '图表2'
},
xAxis: {
type: 'category',
data: json_data.map(function(item) {
return item.date;
})
},
yAxis: {
type: 'value'
},
series: [{
data: json_data.map(function(item) {
return item.value2;
}),
type: 'bar'
}]
};
// 渲染图表
chart1.setOption(option1);
chart2.setOption(option2);
};
xhr.send();
```
阅读全文