echarts简单使用

echarts简单使用

var start=$('#starttime').datebox('getValue');
		    var end=$('#endtime').datebox('getValue');
		Tool.post(Base.host+"admin/welcome/getechartsdata",{start:start,end:end},function(data){
			if(data.success){
				var platformid=data.data.platformid;
				if(platformid=="w"){
					document.getElementById("queryDate").style.display="none";
					document.getElementById("querychart").style.display="none";
				}else{
					var date1=data.data.date1;
					var jsonArr=data.data.record;
					var ordersum=data.data.ordersum;
					var myChart = echarts.init(document.getElementById('charts1'));
			        // 指定图表的配置项和数据
			        myChart.setOption({
			        	tooltip: {
			                formatter: function(params, ticket, callback) {
			                    var showContent ="<div style='text-align:left'>日期："+date1[params.dataIndex] + "<br /><span style='color:#0000FF'>总订单量：" + params.value+"</span>";
			                    var temp="";
			                    for(var i=0;i<jsonArr.length;i++){
			                    	if(jsonArr[i].d==date1[params.dataIndex]){
			                    		var pla_type="";
			                    		if(jsonArr[i].p=='1'){
			                    			pla_type="京东";
			                    		}else if(jsonArr[i].p=='2'){
			                    			pla_type="天猫";
			                    		}else if(jsonArr[i].p=='3'){
			                    			pla_type="拼多多";
			                    		}else if(jsonArr[i].p=='9'){
			                    			pla_type="小鹿";
			                    		}
			                    		if(pla_type!=temp){
			                    			showContent +="<br/><span style='color:#FFFF00'>平台："+pla_type+"</span>";
			                    			temp=pla_type;
			                    		}
			                    		if(jsonArr[i].n==""||jsonArr[i].n==null){
			                    			showContent +="<br/><span style='color:#00FF00'>"+pla_type+":"+jsonArr[i].o+"</span>";
			                    		}else{
			                    			showContent +="<br/><span style='color:#00FF00'>"+jsonArr[i].n+":"+jsonArr[i].o+"</span>";
			                    		}
			                    	}
			                    }
			                    showContent +="</div>";
			                    return showContent;
			                }
			            },
			        	title : {
					        text: '渠道订单数据',
					        x: 'center',
					    },
			        	 xAxis: {
			        		 name:'日期',
			        		 axisLabel:{  
		                        interval: 0 ,
		                        rotate:40 
			                   },
			        		 data: date1
			        	    },
			        	    yAxis: {
			        	    	name:'订单量'
			        	    },
			        	    series: [{
			        	        type: 'bar',
			        	        barWidth:10,
			        	        itemStyle:{
			        	            normal: {
			        	            	 label: {
			                                 show: false
			                                /* position:'top',
			                                 textStyle: {
			                                     color: 'red',
			                                     fontSize:8
			                                 }*/
			                             },
			        	                color:'red',
			        	            }
			        	        },
			        	        data:ordersum
			        	    },{
	                            name:'折线',
	                            type:'line',
	                            itemStyle : {  /*设置折线颜色*/
	                                normal : {
	                                   /* color:'#c4cddc'*/
	                                	color:'#0072dd'
	                                }
	                            },
	                            data:ordersum,
	                        }]
			        });
			        window.onresize = function () {
				        myChart.resize();
				    }
				}
			}
		});

效果