springboot引入echarts springboot整合echarts

需要导入echarts的js文件

 可以去官网下载：

Apache ECharts

点击第一个下载进去 

 滑下去，点击在线定制

 选择图形

选择勾上然后下载即可

 在项目中导入两个js文件，一个jquery，一个echarts

 页面代码，两个按钮，两个盒子，设置按钮的单点事件

 单点事件方法，柱状图，将路径修改为后端的接口

zzt(){
                $(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('myChart'));
//数据加载完之前先显示一段简单的loading动画
                    myChart.showLoading();
                    var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
                    var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
                    $.ajax({
                        type : "get",
                        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                        url : "/test/list", //请求发送到dataActiont处
                        data : {},
                        dataType : "json", //返回数据形式为json
                        success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
                            if (result.code===1) {
                                for(var i=0;i<result.data.length;i++){
                                    //返回数据
                                    names.push(result.data[i].name);
                                    values.push(result.data[i].age);
                                }
                                myChart.hideLoading(); //隐藏加载动画
                                myChart.setOption({
//加载数据图表
                                    title:{
                                        text: '用户年龄统计图'
                                    },
                                    legend: {
                                        data:['用户年龄']
                                    },
                                    xAxis: {
                                        data: names,
                                        axisLabel:{
                                            interval: 0
                                        }
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [{
// 根据名字对应到相应的系列
                                        name: '用户年龄',
                                        type: 'bar',
                                        data: values
                                    }]
                                });
                            }
                        },
                        error : function(errorMsg) {
//请求失败时执行该函数
                            alert("图表请求数据失败!");
                            myChart.hideLoading();
                        }
                    });//end ajax
                });
            },

饼状图:

bzt(){
                $(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
                    myChart.showLoading();
                    var values=[];
//数据加载完之前先显示一段简单的loading动画
                    myChart.showLoading();
                    $.ajax({
                        type : "get",
                        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                        url : "/test/list", //请求发送到dataActiont处
                        data : {},
                        dataType : "json", //返回数据形式为json
                        success : function(res) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
                            if (res.code===1) {
                                for(var i=0;i<res.data.length;i++){
                                    var test={"value":res.data[i].age, "name":res.data[i].name};
                                    values.push(test);
                                }
                                myChart.hideLoading(); //隐藏加载动画
                                myChart.setOption(
                                    {
                                        title: {
                                            text: '用户年龄',
                                            subtext: '',
                                            left: 'center'
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 'left',
                                            data: values
                                        },
                                        series: [
                                            {
                                                name: '物料来源',
                                                type: 'pie',
                                                radius: '60%',
                                                center: ['50%', '50%'],
                                                data:values,
                                                itemStyle: {
                                                    emphasis: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    }
                                );
                            }
                        },
                        error : function(errorMsg) {
//请求失败时执行该函数
                            alert("图表请求数据失败!");
                            myChart.hideLoading();
                        }
                    });//end ajax
                });//刷新方法结束
            },

后端代码:查询所有，dao层和service层通过mybatis-plus自动实现，将数据存入数据传输对象中，进行返回，在controller层上加入RestController注解，表示统一返回，不会跳转路径

@GetMapping("/list")
    public R<List<Admin>> list(){
        List<Admin> list = adminService.list();
        return R.success(list);
    }

页面效果：

 数据库中的数据