实现导入Excel表导入数据库并显示在echarts图形上面
页面效果：
前端是使用：https://docs.sheetjs.com/
sheetjs 读取excel表里面的数据转化为 json数据
<script type="text/javascript">
// 读取本地excel文件
function readWorkbookFromLocalFile(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
// 处理excel文件
handle(workbook);
};
reader.readAsBinaryString(file);
//通过FileReader对象读取文件，利用js-xlsx转成json数据
//FileReader共有4种读取方法：
//1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
//2.readAsBinaryString(file)：将文件读取为二进制字符串
//3.readAsDataURL(file)：将文件读取为Data URL
//4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
}
// 处理excel文件
var date1=[];
var date2=[];
function handle(workbook) {
// workbook.SheetNames[0] excel第一个sheet
var datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
var title=[];
if(datas.length > 0){
// 获取列名是汇总列名，避免某行某个字段没有值，会缺少字段
// 标题
// 获取每行数据
first:
for(var index in datas){ // datas数组，index为索引
second:
for(var key in datas[index]){ // datas[index]对象,key为键
if (-1 === title.indexOf(key)) {
title.push(key);
}
}
}
// 数据
console.log(datas);
for(var i=0;i<datas.length;i++){
date1[i]=datas[i].time;
date2[i]=datas[i].sum;
}
aaa();
bbb(datas);
}
}
然后把拿到的json数据返回到后端进行批量新增
/**
* 导入
* @param times
*/
@PostMapping
private void save(@RequestBody Times[] times){
for (Times time : times) {
timesService.save(time);
}
}
后端还写了一个 查询全部数据的方法 用于前端图形数据的在展示
/**
* 查询所有
*/
@GetMapping
public List<Times> list(){
return timesService.list();
}
这个方法 的调用写在了 前端的body里面 这样可以在打开页面的时候允许这个查询的方法，意思就是说打开页面 图形就去获取数据库的数据 从而显示
最后还有一个导出的功能
导出的功能是使用了 阿里的 easyexcel 下面是jar包
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>3.1.3</version>
</dependency>
直接上代码：
/**
* 导出excel
* @param response
*/
@SneakyThrows(IOException.class)
@GetMapping("/easyExcel")
public void easyExcel(HttpServletResponse response){
System.out.println("2222222222222222222222222222222222222222222222222222");
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); //设置响应内容类型
response.setCharacterEncoding("utf-8");//编码
// 设置文件名, ps:把字符串中所有的'+'替换成'%20'，在URL中%20代表空格
String fileName = URLEncoder.encode("用户信息表", "UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
List<Times> applicantByPage = timesService.list();// 获取全部用户数据
ExcelWriter writer = EasyExcel.write(response.getOutputStream(), Times.class).build();//获取写出流
WriteSheet sheet = EasyExcel.writerSheet("用户").build();//创建表格，设置表格页名称
writer.write(applicantByPage, sheet);//读出
writer.finish();//关闭流
}
你需要导出的实体类也要加上注释
@Data
@ContentRowHeight(18)//内容行高
@HeadRowHeight(25)//标题行高
@ColumnWidth(20)//列宽，可设置成员变量上
public class Times {
@ExcelProperty("用户编号")
private int id;
@ExcelProperty("用户时间")
private String time;
@ExcelProperty("用户人数")
private String sum;
}
最后附上所有前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../static/js/echarts.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="js/jquery.js"></script>
<script src="../static/js/axios.js"></script>
</head>
<body onload="ccc()">
<!--input file打开文件选择框，获取文件信息，并传参给readWorkbookFromLocalFile函数-->
<form>
<input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
<a href="http://localhost:8081/times/easyExcel">导出</a>
</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="display: block;width: 500px;height:350px;"></div>
<div id="main2" style="width: 500px;height:350px;"></div>
<script type="text/javascript">
// 读取本地excel文件
function readWorkbookFromLocalFile(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
// 处理excel文件
handle(workbook);
};
reader.readAsBinaryString(file);
//通过FileReader对象读取文件，利用js-xlsx转成json数据
//FileReader共有4种读取方法：
//1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
//2.readAsBinaryString(file)：将文件读取为二进制字符串
//3.readAsDataURL(file)：将文件读取为Data URL
//4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
}
// 处理excel文件
var date1=[];
var date2=[];
function handle(workbook) {
// workbook.SheetNames[0] excel第一个sheet
var datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
var title=[];
if(datas.length > 0){
// 获取列名是汇总列名，避免某行某个字段没有值，会缺少字段
// 标题
// 获取每行数据
first:
for(var index in datas){ // datas数组，index为索引
second:
for(var key in datas[index]){ // datas[index]对象,key为键
if (-1 === title.indexOf(key)) {
title.push(key);
}
}
}
console.log(datas);
//时间转化，并把datas中数据分列
for(var i=0;i<datas.length;i++){
date1[i]=datas[i].time;
date2[i]=datas[i].sum;
}
//
// console.log(date2);
aaa();
bbb(datas);
}
}
</script>
<script>
var data;
/**
* 导入数据库的方法
* @param datas
*/
function bbb(datas){
axios({
method:"post",
url:"http://localhost:8081/times",
dataType:"json",
data:datas
}).then(function (resp){
alert("导入数据库成功！")
})
}
function ccc(){
var _this=this;
axios({
method:"get",
url:"http://localhost:8081/times",
}).then(function (resp){
console.log(resp.data)
this.data=resp.data
for(var i=0;i<data.length;i++){
date1[i]=data[i].time;
date2[i]=data[i].sum;
}
aaa()
})
}
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
function aaa()
{
var da = date1.map((time, i) => ({ time, sum: date2[i] }))
console.log(da);
var _this=this;
console.log(_this.data)
console.log(_this.date1)
console.log(_this.date2)
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
//饼状图
var option2;
option2 = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data:_this.date1 ,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
]
};
// 指定图表的配置项和数据
option = {
//鼠标放上去 有数据提示
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
//标题
title: {
left: 'center',
text: '作业',
},
//右上角的工具栏
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
//x轴的数据
xAxis: {
type: 'category',
boundaryGap: false,
/**
* 给x轴赋予数据
*/
data: date1
},
//显示的配置
yAxis: {
type: 'value',
boundaryGap: [0, '100%'] //已百分之百显示
},
//y轴的数据
series: [
{
type: 'line',
data: date2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);
}
</script>
</body>
</html>
扫一扫
2330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
