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>