22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）

601 字约 2 分钟读完1688 次阅读更新于 2026/5/3

Echarts 官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line

Vue 安装 Echarts

npm i echarts -S

完整示例代码：
image.png

静态图表的 Vue 代码示例

orders 表结构

CREATE TABLE `orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `no` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单编号',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单名称',
  `money` decimal(10,2) DEFAULT NULL COMMENT '订单金额',
  `userid` int(11) DEFAULT NULL COMMENT '用户ID',
  `category` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单分类',
  `date` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单日期',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='订单表';

Order.java

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.math.BigDecimal;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Orders {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String no;
    private String name;
    private BigDecimal money;
    private Integer userid;
    private String category;
    private String date;

    @TableField(exist = false)
    private String user;
}

OrdersController.java

WebController 统计数据方法

 /**
     * 获取统计图数据
     * @return 动态数据
     */
    @GetMapping("/charts")
    public Result charts() {
        // 包装折线图的数据
        List<Orders> list = ordersService.list();
        Set<String> dates = list.stream().map(Orders::getDate).collect(Collectors.toSet());
        List<String> dateList = CollUtil.newArrayList(dates);
        dateList.sort(Comparator.naturalOrder());
        List<Dict> lineList = new ArrayList<>();
        for (String date : dateList) {
            // 统计当前日期的所有金额总数和
            BigDecimal sum = list.stream().filter(orders -> orders.getDate().equals(date)).map(Orders::getMoney)
                    .reduce(BigDecimal::add).orElse(BigDecimal.ZERO);
            Dict dict = Dict.create();
            Dict line = dict.set("date", date).set("value", sum);
            lineList.add(line);
        }

        // 柱状图数据
        List<Dict> barList = new ArrayList<>();
        Set<String> categories = list.stream().map(Orders::getCategory).collect(Collectors.toSet());
        for (String cate : categories) {
            // 统计当前日期的所有金额总数和
            BigDecimal sum = list.stream().filter(orders -> orders.getCategory().equals(cate)).map(Orders::getMoney)
                    .reduce(BigDecimal::add).orElse(BigDecimal.ZERO);
            Dict dict = Dict.create();
            Dict bar = dict.set("name", cate).set("value", sum);
            barList.add(bar);
        }


        // 包装所有数据
        Dict res = Dict.create().set("line", lineList).set("bar", barList);
        return Result.success(res);
    }

动态图表 Vue