用Springboot写饼状图

最新推荐文章于 2022-11-29 17:27:03 发布

疾病剑豪

最新推荐文章于 2022-11-29 17:27:03 发布

阅读量911

点赞数 2

分类专栏： java 文章标签： ajax jquery java

本文链接：https://blog.csdn.net/lojk333/article/details/107021251

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是跳转

@RequestMapping("/pieChart")
public String pieChart(){//跳转主页
    return "PieChart";
}
@RequestMapping("getpieChart")
@ResponseBody
public JsonResult getpieChart(){//取值
    Integer[] idList = {1009,1010};
    List<Integer> sid = new ArrayList<Integer>();
    for (int i=0;i<idList.length;i++){
        sid.add(idList[i]);
    }
    List<Student> students = studentDao.findAllById(sid);
    return new JsonResult<>(students,"获取列表成功");
}

这是html 记得导入 vue jq 还有 echarts

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var host = "http://localhost:8080";
    var Vm = new Vue({
        el:'#main',
        data: {
            dat:[
                {value:235, name:'视频广告'},//此处可不做修改
                {value:274, name:'联盟广告'},
            ]
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData:function(){//饼图
                $.post(host+'/toStudent/getpieChart',{},function (data) {
                    // alert(JSON.stringify(data))
                    var data = data.data;
                    var len = data.length;
                    Vm.dat=[];
                    for(var i=0;i<len;i++){
                        var info={};
                        info.name=data[i].sname;//对应数据库取出的值
                        info.value=data[i].score[0].grade;//对应数据库取出的值
                        Vm.dat.push(info);
                    }
                    alert(JSON.stringify(Vm.dat));

                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption({
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: Vm.dat,          // 数据数组，name 为数据项名称，value 为数据项值
                            }
                        ]
                    })
                })
            },
        }
    })

</script>
</body>

在这里插入图片描述