vue+springboot实现订单月日年总价统计图表echarts购物商城

以下是一个使用Vue和Spring Boot实现订单月日年总价统计图表的示例：

一、Spring Boot后端部分

1. 创建Spring Boot项目

   • 使用Spring Initializr（https://start.spring.io/）创建一个基本的Spring Boot项目，包含Web依赖。

2. 定义订单实体类（Order.java）

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Order {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String orderDate; // 格式为 "年 - 月 - 日"
    private double totalPrice;

    public Order() {
    }

    public Order(String orderDate, double totalPrice) {
        this.orderDate = orderDate;
        this.totalPrice = totalPrice;
    }

    // 省略getter和setter方法
}

1. 创建订单数据访问层（OrderRepository.java）

import org.springframework.data.jpa.repository.JpaRepository;

public interface OrderRepository extends JpaRepository<Order, Long> {
}

1. 创建服务层接口（OrderService.java）

import java.util.List;

public interface OrderService {
    List<Order> getAllOrders();
}

1. 实现服务层接口（OrderServiceImpl.java）

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class OrderServiceImpl implements OrderService {
    private final OrderRepository orderRepository;

    @Autowired
    public OrderServiceImpl(OrderRepository orderRepository) {
        this.orderRepository = orderRepository;
    }

    @Override
    public List<Order> getAllOrders() {
        return orderRepository.findAll();
    }
}

1. 创建控制器（OrderController.java）

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/orders")
public class OrderController {
    private final OrderService orderService;

    @Autowired
    public OrderController(OrderService orderService) {
        this.orderService = orderService;
    }

    @GetMapping
    public List<Order> getAllOrders() {
        return orderService.getAllOrders();
    }
}

二、Vue前端部分

1. 创建Vue项目

   • 使用vue - create命令创建一个Vue项目（假设项目名为order - chart - app）。

2. 安装Axios和Chart.js

   • 在Vue项目中，使用npm install axios chart.js命令安装Axios（用于与后端通信）和Chart.js（用于创建图表）。

3. 创建Vue组件（OrderChart.vue）

<template>
    <div>
        <canvas id="orderChart"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js';
import axios from 'axios';

export default {
    name: 'OrderChart',
    data() {
        return {
            // 用于存储从后端获取的订单数据
            orderData: [],
            chart: null
        };
    },
    mounted() {
        // 从后端获取订单数据
        axios.get('http://localhost:8080/api/orders')
          .then(response => {
                this.orderData = response.data;
                const groupedData = this.groupByMonth(this.orderData);
                const labels = [];
                const data = [];
                for (const month in groupedData) {
                    labels.push(month);
                    let total = 0;
                    groupedData[month].forEach(order => {
                        total += order.totalPrice;
                    });
                    data.push(total);
                }
                const ctx = document.getElementById('orderChart').getContext('canvas');
                this.chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: '订单总价',
                                data: data,
                                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            })
          .catch(error => {
                console.log(error);
            });
    },
    methods: {
        groupByMonth(orders) {
            const grouped = {};
            orders.forEach(order => {
                const month = order.orderDate.split(' - ')[1];
                if (!grouped[month]) {
                    grouped[month] = [];
                }
                grouped[month].push(order);
            });
            return grouped;
        }
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.destroy();
        }
    }
};
</script>

<style scoped>
</style>

注释解释：

Spring Boot部分：

• 订单实体类（Order.java）：
  • 定义了Order实体类，使用@Entity注解表明这是一个JPA实体。id是订单的唯一标识，orderDate存储订单日期，totalPrice存储订单总价。
• 订单数据访问层（OrderRepository.java）：
  • 继承JpaRepository，这样就可以方便地进行数据库操作，如findAll方法用于获取所有订单记录。
• 服务层接口（OrderService.java）和实现类（OrderServiceImpl.java）：
  • 服务层接口定义了获取所有订单的方法。实现类通过注入OrderRepository来实现这个方法，实际就是调用findAll方法获取所有订单。
• 控制器（OrderController.java）：
  • 定义了一个RestController，@RequestMapping指定了请求路径为/api/orders。@GetMapping注解的方法用于处理GET请求，返回所有订单数据。

Vue部分：

• 在data中：
  • orderData用于存储从后端获取的订单数据，chart用于存储创建的Chart.js实例。
• 在mounted生命周期钩子中：
  • 使用axios.get向http://localhost:8080/api/orders（假设Spring Boot应用运行在8080端口）发送请求获取订单数据。
  • 成功获取数据后，对数据进行处理，按照月份分组计算每个月的订单总价总和。
  • 创建Chart.js实例，设置图表类型为bar（柱状图），配置数据（标签和数据集）和选项（如y轴从0开始）。
• 在methods中的groupByMonth方法：
  • 按照月份对订单数据进行分组，返回一个以月份为键，包含对应订单的数组为值的对象。
• 在beforeDestroy生命周期钩子中：
  • 当组件销毁时，销毁Chart.js实例，防止内存泄漏。