vue前端+后端生成图表（饼状图）

最新推荐文章于 2024-06-25 11:46:19 发布

画凉词微

最新推荐文章于 2024-06-25 11:46:19 发布

阅读量3.5k

点赞数 1

本文链接：https://blog.csdn.net/zhy277/article/details/107026874

版权

表连接要使用注解的（一对多，多对一，多对多）
controller


    @RequestMapping("/pieChart")                         //饼状图
    public String pieChart(Model model){//跳转主页
        return "PieChart";
    }

    @RequestMapping("getpieChart")
    @ResponseBody
    public JsonResult getpieChart(){                  //取值
        Integer[] idList = {1,2,3,4,5,6};
        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部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼状图</title>
    <link rel="shortcut icon" href="#" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var vm =new Vue({
        el:'#main',
        data:{
            dat:[
                {value:235,name:'视频广告'},//这里可修改可不修改
                {value:274,name:'联盟广告'}
            ]
        },
        mounted() {
            this.getData();
            this.timer=setInterval(this.getData,2000);   //每过两秒更新一次    js定时器   以毫秒来计算
        },
        methods: {
            getData:function(){             //饼图
                $.post('http://localhost:8080/stu/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>
</html>