ECharts实现简单饼图和柱状图

1.饼图

前端使用vue,后端使用SpringBoot



/**
 * 渲染图书类型销量饼状图
 */
@GetMapping("/getPie")
public Result getPie() {
    Map resultMap = new HashMap<>();
    List> list = new ArrayList<>();

    // 获得商品分类名称为key,该分类销量为value的map
    List goodsList = goodsService.selectAll(new Goods());
    Map collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTypeId()))
            .collect(Collectors.groupingBy(Goods::getTypeName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    for (String key : collect.keySet()) {
        Map map = new HashMap<>();
        map.put("name", key);
        map.put("value", collect.get(key));
        list.add(map);
    }

    resultMap.put("text", "图书类型销售量统计饼图");
    resultMap.put("subText", "统计维度:图书类型");
    resultMap.put("name", "占比数据");
    resultMap.put("data", list);

    return Result.success(resultMap);
}

1.柱状图

前端使用vue,后端使用SpringBoot



/**
 * 渲染店铺销量柱状图
 */
@GetMapping("/getBar")
public Result getBar() {
    Map resultMap = new HashMap<>(); // 存取最后返回的数据
    Map res = new HashMap<>(); // 暂存销量前5的数据
    List xList = new ArrayList<>(); // 店铺名称
    List yList = new ArrayList<>(); // 店铺总销量

    // 获得店铺名称为key,该店铺全部销量求和为value的map
    List goodsList = goodsService.selectAll(new Goods());
    Map collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getBusinessId()))
            .collect(Collectors.groupingBy(Goods::getBusinessName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    collect.entrySet()
            .stream()
            // 排序
            .sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue()))
            // 截取前limitSize个
            .limit(5)
            .collect(Collectors.toList()).forEach(ele -> res.put(ele.getKey(), ele.getValue()));

    for (String key : res.keySet()) {
        xList.add(key);
        yList.add((Integer) res.get(key));
    }

    resultMap.put("text", "店铺销售量前五统计柱状图");
    resultMap.put("subText", "统计维度:店铺名称");
    resultMap.put("xAxis", xList);
    resultMap.put("yAxis", yList);

    return Result.success(resultMap);
}

可以点个免费的赞吗!!!   

你可能感兴趣的:(SSM,echarts,信息可视化,前端)