基础部分参考:node.js-eCharts柱状图-加载本地-单个Excel文件数据
本文只是在基础部分之上增加了多个文件的支持,相当于是对单文件的简单扩展
广告:如果需要该资源,请扫描我的博客头像加我扣扣
文件结构:
1 服务端:
2 客户端:
3 浏览器访问效果:
核心代码如下(服务端app.js):
var http = require("http");
var fs = require("fs");
var xlsx = require("xlsx");
var express = require('express');
//下面的这个结构是百度EChart给的标准Demo的结构,我们拿过来把数据替换成我们从Excel中读取到的数据,之所以出现在这里是为了让开发人员了解数据的结构
var option = {
"title": {
"text": "销量分布直方图"
},
"tooltip": {},
"legend": {
"data": ["销量"]
},
"xAxis": { "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] },
"yAxis": {},
"series": [{
"name": "销量1",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20, 100]
}]
};
var app = express();
app.all('*', function (req, res, next)
{
//设置跨域访问
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/', function (req, response) {
var absPath = 'index.html';
str = fs.readFileSync(absPath);
console.log('index.html :' + str);
//response.writeHead(200, { "content-type": "text/html" });
response.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });//设置response编码为utf-8
//response.write(JSON.stringify(str));
response.end(str);
console.log("主页 GET 请求");
})
app.get('/data1', function (req, response) {
console.log("/data-1 响应请求");
ReadData1AsJson();
response.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });//设置response编码为utf-8
console.log('data.json : ' + JSON.stringify(option));
response.write(JSON.stringify( option));
response.end();
})
// /list_user 页面 GET 请求
app.get('/data2', function (req, response)
{
console.log("/data-2 响应请求");
ReadData2AsJson();
response.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });//设置response编码为utf-8
console.log('data.json : ' + JSON.stringify(option));
response.write(JSON.stringify(option));
response.end();
})
function ReadExcelAllDataInSheet0(fileNameInCurrentDirectory)
{
var workbook = xlsx.readFile(fileNameInCurrentDirectory);
var first_sheet_name = workbook.SheetNames[0];
console.log('' + first_sheet_name);
var worksheet = workbook.Sheets[first_sheet_name];
const range = xlsx.utils.decode_range(worksheet['!ref']);//整个sheet页的范围
var sheet_to_json = xlsx.utils.sheet_to_json(worksheet);//整个sheet页的内容转换为json(以列的第一行内容作为json成员,后续内容作为成员的值)
return sheet_to_json;
}
function ReadData1AsJson()
{
var sheet_to_json = ReadExcelAllDataInSheet0("柱状图-数据1.xlsx");
for (let i = 0; i < sheet_to_json.length ; ++i)
{
option.xAxis.data[i] = sheet_to_json[i].date;
option.series[0].data[i] = sheet_to_json[i].count;
}
}
function ReadData2AsJson() {
var sheet_to_json = ReadExcelAllDataInSheet0("柱状图-数据2.xlsx");
for (let i = 0; i < sheet_to_json.length ; ++i) {
option.xAxis.data[i] = sheet_to_json[i].date;
option.series[0].data[i] = sheet_to_json[i].count;
}
}
var server = app.listen(8080, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
})