最新Springboot整合Layui+Echart报表柱状图【简单实用】

心已赠人 2022-04-16 01:41 1461阅读 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/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var labelRight = {
            normal: {
                position: 'right'
            }
        };
        $(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();
                    var data2 = new Array();
                    for(var i=0; i < data.mapName.length; i++){
                        data1[i] = data.mapName[i];
                        data2[i] = data.mapValue[i];
                    }
                    //alert(JSON.stringify(data));
                    var myChart = echarts.init(document.getElementById('main'));
    
                    // 指定图表的配置项和数据
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: "name : {b} <br/>grade: {c} "
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data1
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '某站点用户消费积分',
                            type: 'bar',
                            smooth: true,
                            barCategoryGap: 25,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    shadowColor: 'rgba(0,0,0,0.4)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 10
                                }
                            },
                            data: data2,
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        }
    </script>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70]: /images/20220416/4ef2ee60e1934148a029f693bdb4a51e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ0MDMwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220416/640ed148c72e4f7d931f7bf8ccb5b1c9.png