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();
		}
	});
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章