echarts展示后端传来的数据

echarts是前端数据可视化工具插件去官网下载echarts.js。

前端代码为：   

<div id="starmain" style="width: 800px; height: 350px;"></div>

    <div id="end" style="width: 800px; text-align: center;font-size: large;font-weight: bold;">星级占比表</div>
    
    <script type="text/javascript">
    var xName = [];
    var star1 = [];
    var star2 = [];
    var star3 = [];

    var star4 = [];

     var star5 = [];

    //用ajax向服务器发送异步请求，服务器传来数据，在接受传来的数据。

    $.ajax({
        url:"${ctx}/employee/employee/employeeStarList",
        async:false,
        cache:false,
        success:function(data){
            xName = data.month;
            star1 = data.star1;
            star2 = data.star2;
            star3 = data.star3;
            star4 = data.star4;
            star5 = data.star5;
        },
    });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('starmain'));

    // 指定图表的配置项和数据
    var option = {

        tooltip : {
            trigger : 'axis',
            axisPointer : { // 坐标轴指示器，坐标轴触发有效
                type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend : {
            data : [ '1星', '2星', '3星', '4星', '5星' ]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        grid : {
            left : '3%',
            right : '4%',
            bottom : '3%',
            containLabel : true
        },
        xAxis : {
            type : 'category',
            data : xName
        },
        yAxis : {
            type : 'value',
            axisLabel: {  
                  show: true,  
                  interval: 'auto',  
                  formatter: '{value} %'  
                  },  
                 show: true  
        },
        series : [ {
            name : '1星',
            type : 'bar',
            stack : '总量',
            label : {
                normal : {
                    show : true,
                    position : 'insideRight'
                }
            },
            itemStyle: {  
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{b}\n{c}%'  
                    }  
                }  
            } ,
            data : star1
        }, {
            name : '2星',
            type : 'bar',
            stack : '总量',
            label : {
                normal : {
                    show : true,
                    position : 'insideRight'
                }
            },
            itemStyle: {  
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{b}\n{c}%'  
                    }  
                }  
            } ,
            data : star2
        }, {
            name : '3星',
            type : 'bar',
            stack : '总量',
            label : {
                normal : {
                    show : true,
                    position : 'insideRight'
                }
            },
            itemStyle: {  
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{b}\n{c}%'  
                    }  
                }  
            } ,
            data : star3
        }, {
            name : '4星',
            type : 'bar',
            stack : '总量',
            label : {
                normal : {
                    show : true,
                    position : 'insideRight'
                }
            },
            itemStyle: {  
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{b}\n{c}%'  
                    }  
                }  
            } ,
            data : star4
        }, {
            name : '5星',
            type : 'bar',
            stack : '总量',
            label : {
                normal : {
                    show : true,
                    position : 'insideRight'
                }
            },
            itemStyle: {  
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{b}\n{c}%'  
                    }  
                }  
            } ,
            data : star5
        } ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>