如何利用ECharts和Java接口实现图表联动统计分析

百变鹏仔 3周前 (11-27) #echarts

文章标签统计分析

ECharts是一款基于JavaScript的可视化图表库，它可以帮助我们轻松地创建各种各样的图表，如折线图、柱状图、饼图等等。而Java是一种非常流行的编程语言，它在企业级应用中被广泛使用。在本篇文章中，我们将介绍如何利用ECharts和Java接口实现图表联动统计分析。

一、前置知识

在学习本文之前，需要了解以下基础知识：

立即学习“Java免费学习笔记（深入）”；

HTML、CSS、JavaScript的基础知识
Java开发基础知识，如Spring Boot
ECharts的基础知识，如ECharts基础配置、ECharts数据格式等等。

二、准备工作

安装ECharts

ECharts官网上提供了下载链接，我们可以直接下载ECharts并使用。

创建Java工程

我们可以使用Spring Boot创建一个简单的Java工程。

三、数据准备

我们在使用ECharts和Java接口实现图表联动统计分析之前，需要准备好需要使用的数据。在本文中，我们使用一个简单的示例。

假设我们有两个数据表，一个是订单表，一个是订单详情表。订单表中存储了订单的基本信息，如订单号、订单金额、订单日期等等。订单详情表中存储了订单中商品的详细信息，如商品名称、数量、单价等等。

现在我们想要统计每天的订单数量和订单总金额。我们可以按照以下步骤来处理数据：

根据订单表中的订单日期，按照天进行分组。
对每一天的订单号进行查询，计算每天的订单数量。
对每一天的订单金额进行查询，计算每天的订单总金额。

四、后端实现

创建Java实体类

我们需要创建Java实体类来表示数据表中的数据。在本文中，我们需要创建两个Java实体类：Order和OrderItem。

@Entity@Table(name = "t_order")public class Order {     @Id    @GeneratedValue(strategy = GenerationType.AUTO)    private Long id;     @Column(name = "order_no")    private String orderNo;     @Column(name = "order_amount")    private BigDecimal orderAmount;     @Column(name = "order_date")    private LocalDate orderDate;     // getter、setter方法 }

@Entity@Table(name = "t_order_item")public class OrderItem {     @Id    @GeneratedValue(strategy = GenerationType.AUTO)    private Long id;     @Column(name = "order_id")    private Long orderId;     @Column(name = "product_name")    private String productName;     @Column(name = "product_price")    private BigDecimal productPrice;     @Column(name = "product_quantity")    private Integer productQuantity;     // getter、setter方法 }

创建Java接口

我们需要创建一个Java接口来暴露查询数据的接口，并返回给前端查询结果。在本例中，我们可以创建一个接口OrderService，并添加两个方法：getOrderCountByDate和getOrderAmountByDate。分别用来查询每天的订单数量和订单总金额。

public interface OrderService {     List<map object>&gt; getOrderCountByDate();     List<map object>&gt; getOrderAmountByDate(); }</map></map>

实现Java接口

我们在实现接口的时候，需要使用Spring JPA来操作数据库。在getOrderCountByDate方法中，我们需要进行分组查询，统计每天的订单数量。在getOrderAmountByDate方法中，我们需要进行分组查询，统计每天的订单总金额。

@Servicepublic class OrderServiceImpl implements OrderService {     @PersistenceContext    private EntityManager em;     @Override    public List<map object>&gt; getOrderCountByDate() {        String sql = "SELECT order_date, COUNT(*) AS order_count FROM t_order GROUP BY order_date";        Query query = em.createNativeQuery(sql);        List<object> list = query.getResultList();        List<map object>&gt; result = new ArrayList(list.size());        for (Object[] array : list) {            Map<string object> map = new HashMap();            map.put("orderDate", array[0]);            map.put("orderCount", array[1]);            result.add(map);        }        return result;    }     @Override    public List<map object>&gt; getOrderAmountByDate() {        String sql = "SELECT order_date, SUM(order_amount) AS order_amount FROM t_order GROUP BY order_date";        Query query = em.createNativeQuery(sql);        List<object> list = query.getResultList();        List<map object>&gt; result = new ArrayList(list.size());        for (Object[] array : list) {            Map<string object> map = new HashMap();            map.put("orderDate", array[0]);            map.put("orderAmount", array[1]);            result.add(map);        }        return result;    } }</string></map></object></map></string></map></object></map>

四、前端实现

创建HTML页面

我们需要创建一个HTML页面，用来展示ECharts图表。在本文中，我们创建一个简单的HTML页面，该页面包含两个ECharts图表：orderCountChart和orderAmountChart。

    <meta charset="UTF-8"><title>ECharts Demo</title><div id="main1" style="width: 600px;height:400px;"></div><div id="main2" style="width: 600px;height:400px;"></div> <script src="echarts.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="db.js"></script><script>    $(function () {        getOrderCountByDate();        getOrderAmountByDate();    });     function getOrderCountByDate() {        $.ajax({            url: '/api/orders/countByDate',            type: 'GET',            success: function (data) {                var orderCountChart = echarts.init(document.getElementById('main1'));                var option = {                    title: {                        text: '订单数量'                    },                    tooltip: {},                    xAxis: {                        data: data.map(function (item) {                            return item.orderDate;                        })                    },                    yAxis: {},                    series: [{                        name: '订单数量',                        type: 'bar',                        data: data.map(function (item) {                            return item.orderCount;                        })                    }]                };                orderCountChart.setOption(option);                orderCountChart.on('click', function (params) {                    getOrderItemsByDate(params.name);                });            }        });    }     function getOrderAmountByDate() {        $.ajax({            url: '/api/orders/amountByDate',            type: 'GET',            success: function (data) {                var orderAmountChart = echarts.init(document.getElementById('main2'));                var option = {                    title: {                        text: '订单金额'                    },                    tooltip: {},                    xAxis: {                        data: data.map(function (item) {                            return item.orderDate;                        })                    },                    yAxis: {},                    series: [{                        name: '订单金额',                        type: 'bar',                        data: data.map(function (item) {                            return item.orderAmount;                        })                    }]                };                orderAmountChart.setOption(option);                orderAmountChart.on('click', function (params) {                    getOrderItemsByDate(params.name);                });            }        });    }     function getOrderItemsByDate(orderDate) {        console.log('Order date:', orderDate);    } </script>

创建JavaScript文件

我们需要创建一个JavaScript文件，用来调用Java接口，并使用ECharts来展示查询结果。在本文中，我们创建一个名为db.js的JavaScript文件，包含两个函数：getOrderCountByDate和getOrderAmountByDate。这两个函数分别用来查询每天的订单数量和订单总金额并展示在ECharts图表中。

function getOrderCountByDate() {    $.ajax({        url: '/api/orders/countByDate',        type: 'GET',        success: function (data) {            var orderCountChart = echarts.init(document.getElementById('main1'));            var option = {                title: {                    text: '订单数量'                },                tooltip: {},                xAxis: {                    data: data.map(function (item) {                        return item.orderDate;                    })                },                yAxis: {},                series: [{                    name: '订单数量',                    type: 'bar',                    data: data.map(function (item) {                        return item.orderCount;                    })                }]            };            orderCountChart.setOption(option);            orderCountChart.on('click', function (params) {                getOrderItemsByDate(params.name);            });        }    });} function getOrderAmountByDate() {    $.ajax({        url: '/api/orders/amountByDate',        type: 'GET',        success: function (data) {            var orderAmountChart = echarts.init(document.getElementById('main2'));            var option = {                title: {                    text: '订单金额'                },                tooltip: {},                xAxis: {                    data: data.map(function (item) {                        return item.orderDate;                    })                },                yAxis: {},                series: [{                    name: '订单金额',                    type: 'bar',                    data: data.map(function (item) {                        return item.orderAmount;                    })                }]            };            orderAmountChart.setOption(option);            orderAmountChart.on('click', function (params) {                getOrderItemsByDate(params.name);            });        }    });}

五、运行示例

我们使用ECharts和Java接口实现了图表联动统计分析，现在我们来运行一下本例，看看效果如何。

启动Java应用程序

在终端中，进入到Java工程所在的目录，并输入以下命令：

mvn spring-boot:run

在浏览器中打开HTML页面

在浏览器中输入http://localhost:8080即可打开我们编写的页面，并展示图表。

点击图表

我们可以点击图表来查看当前日期下的订单详情。

本文介绍了如何利用ECharts和Java接口实现图表联动统计分析。我们在该示例中使用了Spring Boot来实现Java接口，并使用了ECharts来展示查询结果。在使用本文中的示例时，您需要根据您的实际需求进行适当修改。

文章推荐

如何利用ECharts和Java接口实现图表联动统计分析

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用