1. 程式人生 > >echarts 柱狀圖,折線圖互轉例項(資料動態請求後臺)

echarts 柱狀圖,折線圖互轉例項(資料動態請求後臺)

function initDayChart(){

	var myChart = echarts.init(document.getElementById('appLoginLogDayChart'));
	myChart.setOption({
		title : {
			text : '每日活躍使用者總數分析',
			left : 'center',
			top : 20,
			textStyle : {
				color : '#555'
			}
		},
        tooltip: {},
        legend: {},
        toolbox : {
			show : true,
			feature : {
				magicType : {
					show : true,
					type : [ 'line', 'bar' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true,
					title : '儲存為圖片',
					type : 'png',
					lang : [ '點選儲存' ]
				}
			}
		},
		grid: {  
			y2: 140  
		},
        xAxis: {
            data: []
        },
        yAxis: [ {
			type : 'value',
			name: '人',
			splitArea : {
				show : true
			}
		} ],
        series: [{
            name: '當日使用者總數',
            type: 'bar',
            data: [],
            barWidth : 30,
        }]
    });
	myChart.showLoading();
    var date=[];    
    var nums=[]; 
    
    $.ajax({
		url : "indexController/process/getLoginLogData/sumDay",
		type : 'post',
		async : true,
		data : {"startDate":$("#startDate").val(),"endDate":$("#endDate").val()},
		success : function(data) {
			var rows = data.result;
			for (var i = rows.length-1; i >= 0; i--) {
				date.push(rows[i].date);
			}
			for (var i = rows.length-1; i >= 0; i--) {
				nums.push(rows[i].countNum);
			}
			myChart.hideLoading();
			myChart.setOption({        //載入資料圖表
                xAxis: {
                	name: '日',
                    data: date,
                    type : 'category',
        			axisLabel:{  
        				interval:0,//橫軸資訊全部顯示  
        				rotate:-45,//-30度角傾斜顯示  
        			},  
                },
                series: [{
                    data: nums
                }]
            });
		},
		error : function(){
			myChart.hideLoading();
		}
	});
}