ECharts 图表使用

动态获取数据，在图表中显示
效果图：

后端;
通过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>