最新Springboot整合Layui+Echart报表饼状图

超、凢脫俗 2022-04-16 01:39 752阅读 0赞

## 最新Springboot整合Layui+Echart报表饼状图 ##

先看下饼状图的效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70]  
后台传输过来的数据展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70 1]  
实现代码（前端）

<div class="weadmin-body">           
                
                <div id="main" style="width: 100%;height:400px;"></div>
               
            </div>
            <script src="../../static/js/echarts.min.js"></script>
            <script src="../../static/js/bmap.min.js"></script>
            <script src="../../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
    
            $(function () {
                getData4();
            });
            function  getData4() {
                $.ajax({
                    type: 'post',
                    dataType: 'text',
                    url:  '/member/getData4',
                    data: {},
                    cache: false,
                    async: true,
                    success: function (data) {
                        var data = eval('(' + data + ')');
                        var data1 = new Array();
                        for(var i=0; i < data.mapName.length; i++){
                            data1[i] = {value:data.mapValue[i],name:data.mapName[i]}
                        }
                        //alert(JSON.stringify(data));
                        var myChart = echarts.init(document.getElementById('main'));
    
                        // 指定图表的配置项和数据
                        option = {
                            title : {
                                text: '某站点用户消费积分',
                                subtext: '纯属虚构',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: data1
                            },
                            series : [
                                {
                                    name: '消费积分',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:data1,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                });
            }
        </script>

希望大家能够喜欢，谢谢大家的支持！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70]: /images/20220416/4fbbdaaca31c43ab9359b7b180f5f7ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220416/37b317d804884ff18d33ec1a64c91d10.png