SpringBoot+Vue+Echarts实现可视化图表的渲染

先看效果:

SpringBoot+Vue+Echarts实现可视化图表的渲染_第1张图片

1.首页





2.控制层

 //公共查询方法

    @RequestMapping("/selectAction")
    public Object selectAction(@RequestBody  SqlRequest sql) {
        List mapList = orderMapper.selectAction(sql.getSql());
        System.out.println("sql = " + sql);
        Map map = new HashMap();
        map.put("data", mapList);
        return map;
    }

//首页数据
  @RequestMapping("welcome")
    public Map welcome() {
        String sql="select count(*) nums  from `order`";
        String sql1="select count(*) nums1  from product";
        String sql2="SELECT SUM(amount) AS nums2 FROM `order`";
        String sql3="select count(*) nums3  from user";
        Map map = new HashMap();
        List maps = orderMapper.selectAction(sql);
        List maps1 = productMapper.selectAction(sql1);
        List maps2 = orderMapper.selectAction(sql2);
        List maps3 = userMapper.selectAction(sql3);
        Object nums = maps.get(0).get("nums");

        map.put("orderCount",nums);
        map.put("productCount",maps1.get(0).get("nums1"));
        map.put("salesAmount",maps2.get(0).get("nums2"));
        map.put("userCount",maps3.get(0).get("nums3"));
        return map;
    }

3.Mapper

@Select(" ${sql} ")
	public List selectAction(@Param("sql") String sql);

4.前端直接传SQL,后台接收需要一个实体类封装:

class SqlRequest {
    private String sql; // 接收SQL语句
    // 可添加其他参数,如查询类型、分页信息等

     public String getSql() {
         return sql;
     }

     public void setSql(String sql) {
         this.sql = sql;
     }
 }

写法不是很规范,但是很多时候在别人的项目里去添加功能就很方便,不用去读原来的项目代码,直接在前端把SQL语句当做参数传到后端接口,和原来的项目隔离,实现功能。

你可能感兴趣的:(spring,boot,vue.js,echarts)