其他系列文章导航
Java基础合集
数据结构与算法合集设计模式合集
多线程合集
分布式合集
ES合集
文章目录
其他系列文章导航
文章目录
前言
一、ECharts：现代数据可视化的利器
二、Excel：经典的数据处理与分析工具
三、ECharts与Excel的结合：火花碰撞
3.1 柱状图前端代码
3.2 饼图前端代码
3.3 后端通用代码
3.3.1 生成Excel表格
3.3.2 Excel表格数据导入ECharts
四、总结
前言
在数据爆炸的时代，如何有效地呈现和解析数据变得至关重要。
ECharts和Excel作为两种广泛使用的数据处理和可视化工具，各自拥有其独特的魅力和功能。
本文将深入探讨这两者之间的火花碰撞，以及如何结合它们以实现更强大的数据可视化效果。
一、ECharts：现代数据可视化的利器
ECharts是一款开源的数据可视化库，提供丰富的图表类型和高度定制化的选项。
ECharts支持折线图、柱状图、散点图、饼图等多种图表类型，并且可以根据需要轻松定制颜色、标签、提示框等视觉元素。
此外，ECharts还支持动态数据更新和高性能渲染，使其成为现代数据可视化的理想选择。
二、Excel：经典的数据处理与分析工具
Excel作为微软办公套件的核心组件，已经成为全球范围内广泛使用的数据处理和分析工具。
通过Excel，用户可以进行数据的排序、筛选、函数计算和可视化等多种操作。
Excel提供了丰富的图表类型和数据分析工具，使得用户能够轻松地进行数据处理和可视化工作。
三、ECharts与Excel的结合：火花碰撞
尽管ECharts和Excel都是强大的数据处理和可视化工具，但它们各有优缺点。将两者结合起来，可以取长补短，实现更强大的数据可视化效果。以下是一些结合ECharts和Excel的方法：
- 数据导入与处理：使用Excel进行数据清洗和处理，然后将处理后的数据导入ECharts进行可视化。这样可以充分发挥Excel在数据处理方面的优势，同时利用ECharts丰富的图表类型进行可视化。
- 动态数据更新：在Excel中创建图表后，可以利用ECharts的动态数据更新功能，实时将最新数据传递给图表。这样可以实现数据的动态展示，使得图表更加生动和具有实时性。
- 交互式数据探索：结合ECharts的交互式特性，可以在Excel中实现交互式的数据探索和分析。用户可以通过点击、拖拽等方式在图表上进行操作，获取更多关于数据的洞察。
- 自定义图表类型：ECharts支持高度定制化的图表类型，而Excel也提供了丰富的图表模板。通过结合两者，可以创建出既满足个性化需求又具有专业视觉效果的图表。
- 数据驱动的故事叙述：利用ECharts和Excel的组合，可以创建数据驱动的故事叙述。通过精心设计的图表和数据分析，将数据背后的故事生动地呈现给观众。
接下来通过两个例子给大家演示具体的实现！
3.1 柱状图前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts-bar</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:2000px; height:700px;"></div>
<button onclick="generateExcel()">导出Excel文件</button>
<script type="text/javascript">
function generateExcel() {
fetch('http://localhost:8080/backend/page/eChart/excel')
.then(response => response.json())
.then(data => {
const url = window.URL.createObjectURL(new Blob([data]));
const a = document.createElement('a');
a.href = url;
a.download = '菜品销量.xlsx'; // 你可以根据需要设置文件名
a.click();
});
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '菜品销售情况柱形图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: [],
axisLabel: {
interval: 0
}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [],
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.5,
borderWidth:1
},
}]
});
myChart.showLoading();
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type: "get",
async: false, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "list", //请求发送到TestServlet处
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
var data = result.data;
console.log(data);
if (data) {
for (var i = 0; i < data.length; i++) {
names.push(data[i].name); //挨个取出类别并填入类别数组
}
for (var i = 0; i < data.length; i++) {
nums.push(data[i].count); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
}
},
error: function () {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
3.2 饼图前端代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
<meta charset="utf-8">
<title>echarts-pie</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<button onclick="generateExcel()">导出Excel文件</button>
<script type="text/javascript">
function generateExcel() {
fetch('http://localhost:8080/backend/page/eChart/excel')
.then(response => response.json())
.then(data => {
const url = window.URL.createObjectURL(new Blob([data]));
const a = document.createElement('a');
a.href = url;
a.download = '菜品销量.xlsx'; // 你可以根据需要设置文件名
a.click();
});
}
var mychart1 = echarts.init(document.getElementById('main'));
mychart1.setOption({
title: {
text: '菜品销量统计饼状图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: []
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
mychart1.showLoading();
var names=[];
var nums=[];
$.ajax({
type : "get",
async : false, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "list", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
var data = result.data;
if (data) {
for(var i=0;i<data.length;i++){
names.push(data[i].name); //挨个取出类别并填入类别数组
nums[i] = {value: data[i].count,name:data[i].name};
}
/* for(var i=0;i<data.length;i++){
nums.push(data[i].count); //挨个取出销量并填入销量数组
}*/
mychart1.hideLoading(); //隐藏加载动画
mychart1.setOption({ //加载数据图表
series: {
type: 'pie',
radius: '55%',
center: ['50%','60%'],
data: nums,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgb(0,0,0,0.5)'
}
}
},
});
}
},
error : function() {
//请求失败时执行该函数
alert("图表请求数据失败!");
mychart1.hideLoading();
}
})
window.addEventListener('resize', mychart1.resize);
</script>
</body>
</html>
3.3 后端通用代码
3.3.1 生成Excel表格
@RequestMapping(value = "excel", method = RequestMethod.GET)
public R<String> getExcel(){
File file = new File(path);
QueryWrapper<Dish> wrapper = new QueryWrapper<>();
wrapper.select("name", "count");
List<Dish> list = dishService.list(wrapper);
ArrayList<Map<String, Object>> rows = new ArrayList<>();
for (Dish dish : list) {
Map<String, Object> row = new LinkedHashMap<>();
row.put("菜品", dish.getName());
row.put("销量", dish.getCount());
rows.add(row);
}
// 通过工具类创建writer
ExcelWriter writer = ExcelUtil.getWriter(path);
// 合并单元格后的标题行，使用默认标题样式
writer.merge(1 ,"菜品销量统计");
// 一次性写出内容，使用默认样式，强制输出标题
writer.write(rows,true);
// 关闭writer，释放内存
writer.close();
r.setCode(1);
r.setData("文件导出成功");
return r;
}3.3.2 Excel表格数据导入ECharts
public static final String path = "D:\\java\\excel\\test.xlsx";
File file = new File(path);
FileInputStream input = new FileInputStream(file);
MultipartFile multipartFile = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));
// 1.获取上传文件输入流
InputStream inputStream = null;
inputStream = multipartFile.getInputStream();
// 2.应用HUtool ExcelUtil获取ExcelReader指定输入流和sheet
ExcelReader excelReader = ExcelUtil.getReader(inputStream, "sheet1");
// 可以加上表头验证
// 3.读取第二行到最后一行数据
//List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
return excelReader.readAll();四、总结
ECharts与Excel的结合，不仅可以充分发挥两者的优势，还可以实现更强大的数据可视化效果。
无论是从数据处理、图表创建还是故事叙述的角度，这种结合都能为数据分析师、业务人员和决策者提供更丰富、更直观的数据洞察。
在这个充满数据的世界里，让我们一起点燃ECharts与Excel的火花碰撞，探索无限可能的数据可视化之旅！
![[情商-2]：理解情商最关注的要素 - 情绪，情绪，情绪，不是事情本身，不是逻辑推理，不是讲道理](https://img-blog.csdnimg.cn/direct/1283454ee85d4cb380dc0e7eb45d3806.png)
