ECharts 传值改变图表

使用echarts 插件，选择月份改变图表数据
效果图：
默认显示
11月份选择月份显示：
10月
js部分代码

<body>
  <div>
  
 	<div class="text-c">
 		 <span class="select-box inline">
 	
	   		<select name="type_month" id="type_month" class="select" onchange="echartsdate()">
				
			</select>
		</span>
			
  	</div>
  		
   <div class="count">
    	<div id="main1" class="main1"></div>
    </div>
  </div>
  <script type="text/javascript">
  	$(function(){
  		realSysTime();
  		echartsdate(0);//默认加载当前月
  	})
  
    function realSysTime(){ 
    
       var data =datayear();

		$("#type_month").append("<option value=\"0\">"+data[0]+"</option>")
		$("#type_month").append("<option value=\"1\">"+data[1]+"</option>")
		$("#type_month").append("<option value=\"2\">"+data[2]+"</option>")
		$("#type_month").append("<option value=\"3\">"+data[3]+"</option>")
		$("#type_month").append("<option value=\"4\">"+data[4]+"</option>")
		$("#type_month").append("<option value=\"5\">"+data[5]+"</option>")
    }
    
     function datayear(){  
                //创建现在的时间  
                var data=new Date();  
                //获取年  
                var year=data.getFullYear();  
                //获取月  
                var mon=data.getMonth()+2;  
                var arry=new Array();  
                for(var i=0;i<6;i++){  
                    mon=mon-1;  
                    if(mon<=0){  
                        year=year-1;  
                        mon=mon+12;  
                    }  
                    if(mon<10){  
                        mon="0"+mon;  
                    }  
                      
                    arry[i]=year+"-"+mon;  
                }  
                  
                return arry;  
            }  
    
   
</script>
     <script type="text/javascript">    
        // 基于准备好的dom，初始化echarts实例
       function echartsdate(month){
       month = $('#type_month').val();
       var myChart = echarts.init(document.getElementById('main1'));
       
		myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var days=[];    //类别数组（实际用来盛放X轴坐标值）
         var nums=[];    //销量数组（实际用来盛放Y坐标值）
         var loseorder=[];//未接
         var getorder=[];//完成
         
         $.ajax({
         	type : "post",
         	async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         	url : "<%=basePath%>timeOrderbymonth.action?method=timeOrderListbyMonth&month="+month,
         	dataType : "json",        //返回数据形式为json
         	success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
                    for(var i=0;i<result.length;i++){       
                       days.push(result[i].month);    //挨个取出日期并填入日期数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].count);    //挨个取出输了并填入数量数组
                      }
                    for(var i=0;i<result.length;i++){       
                        loseorder.push(result[i].loseorder);    //挨个取出未接并填入未接数组
                      }
                    for(var i=0;i<result.length;i++){       
                        getorder.push(result[i].getorder);    //挨个取出完成并填入完成数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        tooltip: {
						        trigger: 'axis',
						        axisPointer: {
						            type: 'cross',
						            crossStyle: {
						                color: '#999'
						            }
						        }
						    },
						    toolbox: {
						        feature: {
						            dataView: {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    },
						    legend: {
						        data:['已取消','已完成','总订单数']
						    },
						    xAxis: [
						        {
						            type: 'category',
						            data: days,
						            axisPointer: {
						                type: 'shadow'
						            }
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value',
						            name: '取消/完成订单数',
						            axisLabel: {
						                formatter: '{value}'
						            }
						        },
						        {
						            type: 'value',
						            name: '总订单数',
						            axisLabel: {
						                formatter: '{value}'
						            }
						        }
						    ],
						    series: [
						        {
						            name:'已取消',
						            type:'bar',
						            data:loseorder
						        },
						        {
						            name:'已完成',
						            type:'bar',
						            data:getorder
						        },
						        {
						            name:'总订单数',
						            type:'line',
						            yAxisIndex: 1,
						            data:nums
						        }
						    ]
                    });
                    
             }
         
        },
        
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    });
		}
    </script>
  </body>
ECharts 传值改变图表

猜你喜欢
