layui/js/jQuery echarts 饼图

最新推荐文章于 2023-03-24 15:04:56 发布

遥忆知

最新推荐文章于 2023-03-24 15:04:56 发布

阅读量848

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/g56467467464/article/details/116237963

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../lib/echarts.js"></script>
</head>
<body>
	<div id="main" style="width:400px;height:300px;">
</div>
</body>
<script>


    layui.use(['jquery'], function () {
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.clear();
        var names = [];
        var mydata = [];
        $.ajax({
            method: 'get',
            async: true,
            url: '/student/statisticalStatus',
            dataType: 'json',
            success: function (datas) {
                var data = datas.data
                for (var i=0;i<data.length;i++){
                    names.push(data[i].name);
                    mydata[i] = {value: data[i].value, name: data[i].name};
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '学生就业情况',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '就业情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: mydata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);
            }
        });
    })
</script>
</html>

注意<div id="main" style="width:400px;height:300px;">里面的style="width:400px;height:300px;",如果不加,页面饼图显示不出来

后端返回实体类

在这里插入图片描述

返回数据格式

在这里插入图片描述
List<StatisticalDTO> dtos = new ArrayList<>();

效果图

在这里插入图片描述

遥忆知

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
layui/js/jQuery echarts 饼图

前台<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../lib/layui/css/layui.css"> <script src="../lib/layui/layui.js"></script> <script src="../lib/jquer
复制链接

扫一扫