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

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

先看下柱状图的效果图（有点丑）

后台传输过来的数据展示
实现代码（前端）

<div class="weadmin-body">         
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <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>

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