前台:
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 1500px; height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var url = '${pageContext.request.contextPath}/income/sumCash';
$.ajax({
url:url,
success:function(data){
// 2.获取数据
cash = data.cash;//金额
userName = data.userName;//开单中心
// 3.更新图表myChart的数据
var option = {
title : {
text : '财务纳表'
},
tooltip : {},
legend : {
data : [ '金额' ],
},
xAxis : {
data : userName
},
yAxis : {},
series : {
name : '金额',
type : 'bar',
data : cash
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : 'bar'
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
}
myChart.setOption(option);
}
})
</script>
后台:
@RequestMapping("sumCash")
@ResponseBody
public Map<String,Object> sumCash() throws IOException {
List<sumCashEntity>list=incomeService.sumCash();
/*金额*/
Double[] cash=new Double[list.size()];
for(int i=0;i<cash.length;i++){
cash[i]=list.get(i).getCash();
}
/*横轴, 开单中心*/
String[]userName=new String[list.size()];
for(int i=0;i<userName.length;i++){
userName[i]=list.get(i).getUserName();
}
Map<String, Object> map = new HashMap<>();
map.put("cash", cash);
map.put("userName", userName);
return map;
}