其他系列文章导航
文章目录
前言
在数据爆炸的时代，如何有效地呈现和解析数据变得至关重要。
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的火花碰撞，探索无限可能的数据可视化之旅！
