项目源代码有偿使用，如有需要，请于文末联系作者。

效果图

主要技术

1. 图表控件echarts
2. 前端vue
3. 前端http客户端 axios
4. 后端服务springboot
5. 数据库访问jpa

数据库表结构

主要代码

控制器 接收前端传入参数

    @GetMapping("/aChart")

    public Result aChart() {

        List<Map> entity = repository.aChart();

        List<String> x = entity.stream().map(i -> i.get("province").toString()).collect(Collectors.toList());

        List<Object> y = entity.stream().map(i -> i.get("num")).collect(Collectors.toList());

        Map hashMap = Maps.newHashMap();

        hashMap.put("x", x);

        hashMap.put("y", y);

        return Result.ok(hashMap);

}

自定义sql查询   

@Query(value = "SELECT province,count(1) num FROM sight GROUP BY province ORDER BY num DESC LIMIT 0,6", nativeQuery = true)
List<Map> aChart();

前端发起http请求

export const getA = () => {

    return http.get('/sight/aChart')

}

项目开发、代码讲解、技术培训、疑难问题、环境搭建 请联系：gaoyue_13

微信搜一搜：逮猫大兄弟。感谢支持~