echarts 柱状图，折线图互转实例（数据动态请求后台）

最新推荐文章于 2022-04-28 16:21:16 发布

云怎

最新推荐文章于 2022-04-28 16:21:16 发布

阅读量371

点赞数 2

文章标签： echarts

本文链接：https://blog.csdn.net/qq_35695023/article/details/113987253

版权

该段代码展示了如何使用Echarts库创建一个条形图，用于显示每日活跃用户的统计数据。图表包括加载提示、工具箱（允许切换图表类型、还原和保存为图片）以及X轴和Y轴配置。数据通过AJAX从服务器获取，并动态更新到图表中。

摘要由CSDN通过智能技术生成

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