首先需要导入
<script type="text/javascript" src="../../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../theme/assets/global/plugins/highcharts/js/highcharts.js"></script>
前台jsp
<div id="cust_line" style="height:315px;float:left;"></div>
js
function custNumTrend(){
var nowdata = [];
var olddata = [];
var color = ["gray","pink","red","blue","yellow","green","#fff"];
$.ajax({
type:'get',
url:'${pageContext.request.contextPath}/tax/queryCustNumTrend',//请求数据的地址
success:function(data){
console.log(data);
var json = data;
for(var key in json.nowlist){
nowdata.push(json.nowlist[key].custTotalNum);
}
for(var oldkey in json.oldlist){
olddata.push(json.oldlist[oldkey].custTotalNum);
}
console.log(nowdata);
cust_lineChart.series[0].setData(nowdata);//数据填充到highcharts上面
cust_lineChart.series[1].setData(olddata);//数据填充到highcharts上面
},
error:function(e){
}
});
var cust_lineChart = new Highcharts.Chart({
chart:{
renderTo:'cust_line',
type:'line' //显示类型
},
title:{
text:'客户增长趋势', //图表的标题
align:'left'
},
credits: {
enabled: false //去掉highcharts网站url
},
xAxis:{
categories:['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis:{
title:{
text:'客户(数量)' //Y轴的名称
},
min: 0,
tickInterval: 2 //设置Y轴坐标值的间隔固定为100
},
legend: {
data:['今年','去年'],
verticalAlign: 'top'
},
//,tickPositions: [0, 10, 20, 30,40,50,60] // 指定竖轴坐标点的值
tooltip: {
enabled: true
},
series: [{
name:'今年'
},
{
name:'去年'
}]
});
}
后台
@RequestMapping("/queryCustNumTrend")
@ResponseBody
public CustNumListVO queryCustNumTrend() {
logger.info("客户增长趋势查询");
CustNumListVO vo = taxService.queryCustNumTrend();
return vo;
}
返回的数据:
{"name":null,"yearList":[2015,2016],"oldlist":[],"nowlist":[{"channel":null,"month":"201603","year":null,"agentName":null,"agentId":null,"custTotalNum":1,"cnt":null},{"channel":null,"month":"201603","year":null,"agentName":null,"agentId":null,"custTotalNum":1,"cnt":null},{"channel":null,"month":"201604","year":null,"agentName":null,"agentId":null,"custTotalNum":4,"cnt":null},{"channel":null,"month":"201604","year":null,"agentName":null,"agentId":null,"custTotalNum":3,"cnt":null},{"channel":null,"month":"201605","year":null,"agentName":null,"agentId":null,"custTotalNum":2,"cnt":null},{"channel":null,"month":"201605","year":null,"agentName":null,"agentId":null,"custTotalNum":2,"cnt":null}]}