最新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>
希望大家能够喜欢,谢谢大家的支持!