最新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/bmap.min.js"></script>
<script src="../../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
$(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();
for(var i=0; i < data.mapName.length; i++){
data1[i] = {value:data.mapValue[i],name:data.mapName[i]}
}
//alert(JSON.stringify(data));
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title : {
text: '某站点用户消费积分',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: data1
},
series : [
{
name: '消费积分',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:data1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
}
</script>
希望大家能够喜欢,谢谢大家的支持!