ECharts与Excel的火花

发布时间:2023年12月31日

其他系列文章导航

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的方法:

  1. 数据导入与处理:使用Excel进行数据清洗和处理,然后将处理后的数据导入ECharts进行可视化。这样可以充分发挥Excel在数据处理方面的优势,同时利用ECharts丰富的图表类型进行可视化。
  2. 动态数据更新:在Excel中创建图表后,可以利用ECharts的动态数据更新功能,实时将最新数据传递给图表。这样可以实现数据的动态展示,使得图表更加生动和具有实时性。
  3. 交互式数据探索:结合ECharts的交互式特性,可以在Excel中实现交互式的数据探索和分析。用户可以通过点击、拖拽等方式在图表上进行操作,获取更多关于数据的洞察。
  4. 自定义图表类型:ECharts支持高度定制化的图表类型,而Excel也提供了丰富的图表模板。通过结合两者,可以创建出既满足个性化需求又具有专业视觉效果的图表。
  5. 数据驱动的故事叙述:利用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的火花碰撞,探索无限可能的数据可视化之旅!


文章来源:https://blog.csdn.net/kologin/article/details/135274567
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。