动态获取数据,在图表中显示
效果图:
后端;
通过json 传递list数组给前端
public String tellNum(){
ArrayList<MonthCount> list = CountManage.getTellOrder();
JSONArray jsonarray = JSONArray.fromObject(list);
return ajaxJsonArray(jsonarray);
}
//getTellOrder() 获取数据参考前文
前端:
<!-- 引入echarts插件-->
<script src="js/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var week=[]; //星期
var nums=[]; //总数 数组(实际用来盛放Y坐标值)
var loseorder=[];//未接
var getorder=[];//完成
$.ajax({
type : "post",
async : false, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "<%=basePath%>tellNumlist.action?method=tellNum",
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
$.each(result,function(i,item){
week.push(result[i].week)
nums.push(result[i].count);
loseorder.push(result[i].loseorder);
getorder.push(result[i].getorder);
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
title : {
text: '订单数图表'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['已取消','已完成','订单总数']
},
calculable : true,
xAxis : [
{
type : 'category',
data : week
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'已取消',
type:'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:loseorder,
},
{
name:'已完成',
type:'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:getorder,
},
{
name:'订单总数',
type:'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:nums,
}
]
});
}
});
</script>