ECharts与Excel的火花
前言
在数据爆炸的时代，如何有效地呈现和解析数据变得至关重要。
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的火花碰撞，探索无限可能的数据可视化之旅！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2024-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录