若依前后端分离引用echarts方法

新建EchartsController.java

@RestController
@RequestMapping("/echarts")
public class EchartsController {
   

}

静态数据

1.1后端代码


    @GetMapping("/example")
    public AjaxResult example(){
        Map map = new HashMap<>();
        map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 50));
        return AjaxResult.success(map);
    }

此段代码参考:程序员青戈。

1.2前端代码

 

1.3结果显示

若依前后端分离引用echarts方法_第1张图片

动态数据

以统计若依系统中用户性别的扇形图为例

2.1后端代码

为了方便测试,分别给male,female赋值。

@GetMapping("/sex")
    public AjaxResult sex(SysUser user){
        List list = userService.selectUserList(user);
        int male = 20;
        int female = 30;
        for (SysUser test: list){
            String sex = test.getSex();
            if(sex.equals(String.valueOf('男'))){
                male+=1;
            }else{
                female+=1;
            }
        }
        return AjaxResult.success(CollUtil.newArrayList(male,female));
    }

 2.2前端代码

 

 2.3数据库信息及结果显示

sex字段:0为男,1为女

 若依前后端分离引用echarts方法_第2张图片

 本人新手菜鸟,如有问题,请多多指教。

你可能感兴趣的:(echarts,java)