Echarts堆叠条形图——各班在各个月份男生、女生迟到次数统计

最新推荐文章于 2024-01-17 11:49:24 发布
最新推荐文章于 2024-01-17 11:49:24 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端学习笔记 文章标签： echarts 堆叠条形图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Denglishang/article/details/81322193
版权

提前准备好echarts.js官网下载地址：http://echarts.baidu.com/download.html

先定义一个data，用来存需要统计的数据（可以看做是请求返回的JSON数据）：

var data =  {
"month_start":"2017-11" ,
"month_end":"2018-04",
"resultlist":[{"time":"2017-11","sex_no":"-1","class_no":"1","times_sum":"3"},
            {"time":"2017-11","sex_no":"0","class_no":"1","times_sum":"9"},
            {"time":"2017-11","sex_no":"1","class_no":"1","times_sum":"7"},
            {"time":"2017-11","sex_no":"-1","class_no":"2","times_sum":"5"},
            {"time":"2017-11","sex_no":"2","class_no":"2","times_sum":"5"},
            {"time":"2017-11","sex_no":"3","class_no":"2","times_sum":"2"},
            {"time":"2017-11","sex_no":"4","class_no":"3","times_sum":"4"},
            {"time":"2017-11","sex_no":"-1","class_no":"4","times_sum":"4"},
            {"time":"2017-11","sex_no":"6","class_no":"4","times_sum":"4"},
            {"time":"2017-11","sex_no":"7","class_no":"4","times_sum":"7"},
            {"time":"2017-12","sex_no":"-1","class_no":"1","times_sum":"2"},
            {"time":"2017-12","sex_no":"0","class_no":"1","times_sum":"24"},
            {"time":"2017-12","sex_no":"1","class_no":"1","times_sum":"24"},
            {"time":"2017-12","sex_no":"-1","class_no":"2","times_sum":"6"},
            {"time":"2017-12","sex_no":"2","class_no":"2","times_sum":"5"},
            {"time":"2017-12","sex_no":"3","class_no":"2","times_sum":"8"},
            {"time":"2017-12","sex_no":"-1","class_no":"3","times_sum":"6"},
            {"time":"2017-12","sex_no":"4","class_no":"3","times_sum":"5"},
            {"time":"2017-12","sex_no":"5","class_no":"3","times_sum":"10"},
            {"time":"2017-12","sex_no":"-1","class_no":"4","times_sum":"1"},
            {"time":"2017-12","sex_no":"6","class_no":"4","times_sum":"7"},
            {"time":"2017-12","sex_no":"7","class_no":"4","times_sum":"10"},
            {"time":"2018-01","sex_no":"0","class_no":"1","times_sum":"25"},
            {"time":"2018-01","sex_no":"1","class_no":"1","times_sum":"34"},
            {"time":"2018-01","sex_no":"-1","class_no":"2","times_sum":"4"},
            {"time":"2018-01","sex_no":"2","class_no":"2","times_sum":"12"},
            {"time":"2018-01","sex_no":"3","class_no":"2","times_sum":"15"},
            {"time":"2018-01","sex_no":"-1","class_no":"3","times_sum":"3"},
            {"time":"2018-01","sex_no":"4","class_no":"3","times_sum":"4"},
            {"time":"2018-01","sex_no":"5","class_no":"3","times_sum":"15"},
            {"time":"2018-01","sex_no":"-1","class_no":"4","times_sum":"3"},
            {"time":"2018-01","sex_no":"6","class_no":"4","times_sum":"20"},
            {"time":"2018-01","sex_no":"7","class_no":"4","times_sum":"14"},
            {"time":"2018-02","sex_no":"0","class_no":"1","times_sum":"8"},
            {"time":"2018-02","sex_no":"1","class_no":"1","times_sum":"12"},
            {"time":"2018-02","sex_no":"-1","class_no":"2","times_sum":"1"},
            {"time":"2018-02","sex_no":"2","class_no":"2","times_sum":"2"},
            {"time":"2018-02","sex_no":"3","class_no":"2","times_sum":"9"},
            {"time":"2018-02","sex_no":"-1","class_no":"4","times_sum":"2"},
            {"time":"2018-02","sex_no":"6","class_no":"4","times_sum":"12"},
            {"time":"2018-02","sex_no":"7","class_no":"4","times_sum":"10"},
            {"time":"2018-03","sex_no":"-1","class_no":"1","times_sum":"1"},
            {"time":"2018-03","sex_no":"0","class_no":"1","times_sum":"2"},
            {"time":"2018-03","sex_no":"1","class_no":"1","times_sum":"2"},
            {"time":"2018-03","sex_no":"-1","class_no":"2","times_sum":"1"},
            {"time":"2018-04","sex_no":"-1","class_no":"2","times_sum":"1"},
            {"time":"2018-04","sex_no":"2","class_no":"3","times_sum":"20"},
            {"time":"2018-04","sex_no":"1","class_no":"4","times_sum":"5"},
            {"time":"2018-04","sex_no":"5","class_no":"1","times_sum":"7"}]
};

其中，time是月份，class_no是班级编号，times_sum是迟到次数，sex_no等于-1是冗余数据，其余的0、1代表一班男生、女生，2、3代表二班男生、女生，4、5代表三班男生、女生，6、7代表四班男生、女生（为什么要这样呢？后面会慢慢讲到）

最终实现效果：

先定义一个方法，根据传入开始月份和结束月份，返回一个月份数组（月份格式为:yyyy-mm）：

/*根据始末月份获取该范围内所有月份*/
function getAllMonth(time_s,time_e) {
	var startTime = new Date(time_s).getTime();//  转换为时间戳
	var endTime = new Date(time_e).getTime();// 转换为时间戳
	var arr = [];// 存放结果
	var format  = function(time) {// 最后的格式转换
	    var date = new Date(time);
	    return (date.getMonth() < 9)?(date.getFullYear() + '-0' + (date.getMonth() + 1)):(date.getFullYear() + '-' + (date.getMonth() + 1));//1-9?￡???油0
	};
	var isLeapYear = function(year) { 
		return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);// 判断是否为闰年
	};
	// 月份映射 假设不为闰年
	var MONTH = {
	    '1': 31,
	    '2': 28,
	    '3': 31,
	    '4': 30,
	    '5': 31,
	    '6': 30,
	    '7': 31,
	    '8': 31,
	    '9': 30,
	    '10': 31,
	    '11': 30,
	    '12': 31
	};
	arr.push(time_s);
	if(time_s!=time_e){
		while (startTime < endTime) {
		    var start = new Date(startTime);// 转换时间格式
		    if (isLeapYear(start.getFullYear()) && (start.getMonth() + 1 === 2)) {// 判断是否为闰年的2月份
		        startTime = startTime + 29 * 24 * 60 * 60 * 1000;
		    } else {
		        startTime = startTime + MONTH[start.getMonth() + 1] * 24 * 60 * 60 * 1000;
		    }
		    arr.push(format(startTime));
		}
	}
	return arr;
}

获取月份范围数组，定义纵坐标：

var timeArr = getAllMonth(month_s,month_e);// 获取月份范围数组
var classNOArr = ['一班男生迟到次数','一班女生迟到次数','二班男生迟到次数','二班女生迟到次数',
    '三班男生迟到次数','三班女生迟到次数','四班男生迟到次数','四班女生迟到次数'];//纵坐标

需要将data数据不同月份、不同班级存到一个二维数组中（目前的例子有6个月，4个班级（男、女又各一组）），结构如下图：

因此，上面提到的sex_no:0、1代表一班男生、女生，2、3代表二班男生、女生，4、5代表三班男生、女生，6、7代表四班男生、女生,正好对应二维数组的各行。所以，初始化为8X6的二维数组，初始元素全部为0。

//二维数组定义与初始化
var dataArr = new Array();
for(var i = 0; i < classNOArr.length; i++){
	dataArr[i] = new Array();
      for(var j = 0; j < timeArr.length; j++){
      	dataArr[i][j] = 0;
      }
}

将sex_no作为二维数组的行下标，将原始的data数据分别存放的对应二维数组的位置，作为最终的绘图数据。

var list = (data.resultlist || []).sort(function(v1,v2){
	return v1["time"] < v2["time"]?-1:1;//字符串比较,排序时间
});
//数据放入二维数组
for (var i = 0; i < list.length; i++) {
	if(list[i]["sex_no"] != -1){
		dataArr[list[i]["sex_no"]][timeArr.indexOf(list[i]["time"])] = list[i]["times_sum"];
	}
}

定义series数据系列：

var seriesData = new Array();//series数据系列
for(var i = 0; i < timeArr.length;i++){
	seriesData[i] = new Array();
}

将二维数组数据塞入series数据系列，并定义数据视图的表头、表格主体：

typeArr = classNOArr;
var length1 = 0;//循环遍历参数
var length2 = dataArr.length;//循环遍历参数
initData(length1,length2);
	
function initData(length1,length2){
 	for(var i = length1; i < length2;i++){
 		for(var j = 0; j < seriesData.length;j++){
 			seriesData[j].push(dataArr[i][j]); 
 		}
 }
   table_header = '<td width="10%"> </td>';
   for(var i = length1; i < length2; i++){
	   table_header += '<td>'+classNOArr[i]+'</td>';
 }
 for(var i = 0; i < timeArr.length; i++){
   table_body += '<tr>'
 				   + '<td width="10%">' 
 				   + '<button style="width:15px;height:10px;background:'+colorArr[i]+';" disabled></button>' //数据视图彩色图例
 					+ timeArr[i]+'</td>';
   for(var j = length1; j < length2; j++){
	   table_body +='<td>'+dataArr[j][i]+'</td>';
   }
 	table_body += '</tr>';
 }
}

开始画图：

//series数据统一处理
function seriesArr(){
	var serie = [];
	for(var i = 0; i < timeArr.length; i++){
	var item = {
	           name:timeArr[i],
	           type:'bar',
	           barMaxWidth : 50,
	           stack: '各班迟到次数统计',
	           data : seriesData[i],
	           itemStyle: {
	        	   normal:{
	        		   color:colorArr[i]
	        	   }
	           }
	         };
	serie.push(item);
	}
	return serie;
}

var myChart = echarts.init(DOM.get('#main'));
option = {
	    tooltip : { //tooltip:气泡提示框，常用于展现更详细的数据
	        trigger: 'item',    //或'axis'
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    legend : {//legend:图例，表述数据和图形的关联
	    	data:timeArr
	    },
	    toolbox : {
			right : "10%",
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : true,
					optionToContent: function(opt) {
					    var series = opt.series;
					    var table = '<div style="width:100%;height:100%;text-align:center;border:2px solid #333">'
					    		+'<table class="table table-bordered" style="width:100%;text-align:center;border:1px solid #333"><tbody><tr>'
					    	    + table_header
					            + '</tr>'
					            + table_body 
					            + '</tbody></table></div>';
					    return table;
					}
				},
				restore : {
					show : false
				},
				saveAsImage : {
					show : true
				},
			}
		},
	    grid : {  //grid:直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [//xAxis: 直角坐标系中的横轴，通常并默认为类目型
	        {
	            type : 'value', 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
	        }
	    ],
	    yAxis : [ //yAxis	直角坐标系中的纵轴，通常并默认为数值型
	        {
	            type : 'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
	            data : typeArr,
	            name : '班级'
	        }
	    ],
	    series : seriesArr() //数据系列
};
    myChart.setOption(option);

//图例点击事件，全部取消选中时纵坐标显示为空。
myChart.on('legendselectchanged', function(obj) {
//    				console.log(option.yAxis[0].data);
      var selected = obj.selected;
      var option = myChart.getOption();
//    		        myChart.clear();
      for(var i = 0,j = 0;i < timeArr.length;i++){
      	if(selected[timeArr[i]] == false) 
      		j += 1;
      }
      if(j == timeArr.length){
      	for(var i = 0;i < timeArr.length;i++){
        	selected[timeArr[i]] = true; 
        }
      }
      myChart.setOption(option,true);
  });
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>echarts应用</title>
    <script src="https://g.alicdn.com/kissy/k/1.4.8/seed-min.js"></script>
    <script type="text/javascript" src="./echarts.js"></script>
</head >

<body>
    <div id="main" style="width: 80%;height:500px;;left:10%;top:20px;"></div>
</body>
<script type="text/javascript">
    	KISSY.use("dom,io,event",function(S,DOM,IO,Event){
    		 var data ={"month_start":"2017-11" ,"month_end":"2018-04",
    			 "resultlist":[
    			  {"time":"2017-11","sex_no":"-1","class_no":"1","times_sum":"3"},
    			  {"time":"2017-11","sex_no":"0","class_no":"1","times_sum":"9"},
    			  {"time":"2017-11","sex_no":"1","class_no":"1","times_sum":"7"},
    			  {"time":"2017-11","sex_no":"-1","class_no":"2","times_sum":"5"},
    			  {"time":"2017-11","sex_no":"2","class_no":"2","times_sum":"5"},
    			  {"time":"2017-11","sex_no":"3","class_no":"2","times_sum":"2"},
    			  {"time":"2017-11","sex_no":"4","class_no":"3","times_sum":"4"},
    			  {"time":"2017-11","sex_no":"-1","class_no":"4","times_sum":"4"},
    			  {"time":"2017-11","sex_no":"6","class_no":"4","times_sum":"4"},
    			  {"time":"2017-11","sex_no":"7","class_no":"4","times_sum":"7"},
    			  {"time":"2017-12","sex_no":"-1","class_no":"1","times_sum":"2"},
    			  {"time":"2017-12","sex_no":"0","class_no":"1","times_sum":"24"},
    			  {"time":"2017-12","sex_no":"1","class_no":"1","times_sum":"24"},
    			  {"time":"2017-12","sex_no":"-1","class_no":"2","times_sum":"6"},
    			  {"time":"2017-12","sex_no":"2","class_no":"2","times_sum":"5"},
    			  {"time":"2017-12","sex_no":"3","class_no":"2","times_sum":"8"},
    			  {"time":"2017-12","sex_no":"-1","class_no":"3","times_sum":"6"},
    			  {"time":"2017-12","sex_no":"4","class_no":"3","times_sum":"5"},
    			  {"time":"2017-12","sex_no":"5","class_no":"3","times_sum":"10"},
    			  {"time":"2017-12","sex_no":"-1","class_no":"4","times_sum":"1"},
    			  {"time":"2017-12","sex_no":"6","class_no":"4","times_sum":"7"},
    			  {"time":"2017-12","sex_no":"7","class_no":"4","times_sum":"10"},
    			  {"time":"2018-01","sex_no":"0","class_no":"1","times_sum":"25"},
    			  {"time":"2018-01","sex_no":"1","class_no":"1","times_sum":"34"},
    			  {"time":"2018-01","sex_no":"-1","class_no":"2","times_sum":"4"},
    			  {"time":"2018-01","sex_no":"2","class_no":"2","times_sum":"12"},
    			  {"time":"2018-01","sex_no":"3","class_no":"2","times_sum":"15"},
    			  {"time":"2018-01","sex_no":"-1","class_no":"3","times_sum":"3"},
    			  {"time":"2018-01","sex_no":"4","class_no":"3","times_sum":"4"},
    			  {"time":"2018-01","sex_no":"5","class_no":"3","times_sum":"15"},
    			  {"time":"2018-01","sex_no":"-1","class_no":"4","times_sum":"3"},
    			  {"time":"2018-01","sex_no":"6","class_no":"4","times_sum":"20"},
    			  {"time":"2018-01","sex_no":"7","class_no":"4","times_sum":"14"},
    			  {"time":"2018-02","sex_no":"0","class_no":"1","times_sum":"8"},
    			  {"time":"2018-02","sex_no":"1","class_no":"1","times_sum":"12"},
    			  {"time":"2018-02","sex_no":"-1","class_no":"2","times_sum":"1"},
    			  {"time":"2018-02","sex_no":"2","class_no":"2","times_sum":"2"},
    			  {"time":"2018-02","sex_no":"3","class_no":"2","times_sum":"9"},
    			  {"time":"2018-02","sex_no":"-1","class_no":"4","times_sum":"2"},
    			  {"time":"2018-02","sex_no":"6","class_no":"4","times_sum":"12"},
    			  {"time":"2018-02","sex_no":"7","class_no":"4","times_sum":"10"},
    			  {"time":"2018-03","sex_no":"-1","class_no":"1","times_sum":"1"},
    			  {"time":"2018-03","sex_no":"0","class_no":"1","times_sum":"2"},
    			  {"time":"2018-03","sex_no":"1","class_no":"1","times_sum":"2"},
    			  {"time":"2018-03","sex_no":"-1","class_no":"2","times_sum":"1"},
    			  {"time":"2018-04","sex_no":"-1","class_no":"2","times_sum":"1"},
    			  {"time":"2018-04","sex_no":"2","class_no":"3","times_sum":"20"},
    			  {"time":"2018-04","sex_no":"1","class_no":"4","times_sum":"5"},
    			  {"time":"2018-04","sex_no":"5","class_no":"1","times_sum":"7"}
    			  ]};
    		initList(data); 
    		function initList(data) {
    			var list = (data.resultlist || []).sort(function(v1,v2){
    				return v1["time"] < v2["time"]?-1:1;//字符串比较,排序时间
    			});
    			var month_s = data.month_start;//查询开始月
    			var	month_e = data.month_end;//查询末月
    			
    	        var timeArr = getAllMonth(month_s,month_e);// 获取月份范围数组
    	        var typeArr = [];//纵坐标
    	        var classNOArr = ['一班男生迟到次数','一班女生迟到次数','二班男生迟到次数','二班女生迟到次数',
    	        	           '三班男生迟到次数','三班女生迟到次数','四班男生迟到次数','四班女生迟到次数'];//纵坐标
    	        var table_header;//数据视图表头html
    	        var table_body = '';//数据视图数据html
    	        var colorArr = ['#4e81bd','#c1504c','#9bbb58','#8164a3','#4aadc7','#f79746'];//颜色数组
    	    	
    	      //二维数组定义与初始化
    			var dataArr = new Array();
    			for(var i = 0; i < classNOArr.length; i++){
    				dataArr[i] = new Array();
    		        for(var j = 0; j < timeArr.length; j++){
    		        	dataArr[i][j] = 0;
    		        }
    			}
    			var seriesData = new Array();//series数据系列
    	    	for(var i = 0; i < timeArr.length;i++){
    	    		seriesData[i] = new Array();
    			}
    			//数据放入二维数组
    		    for (var i = 0; i < list.length; i++) {
    				if(list[i]["sex_no"] != -1){
    					dataArr[list[i]["sex_no"]][timeArr.indexOf(list[i]["time"])] = list[i]["times_sum"];
    				}
    		    }
    		    
    		    typeArr = classNOArr;
   	        	var length1 = 0;//循环遍历参数
   	        	var length2 = dataArr.length;//循环遍历参数
   	        	initData(length1,length2);
   	        	
    		    function initData(length1,length2){
    			   	for(var i = length1; i < length2;i++){
    			   		for(var j = 0; j < seriesData.length;j++){
    			   			seriesData[j].push(dataArr[i][j]); 
    			   		}
    			   }
    		       table_header = '<td width="10%"> </td>';
    		       for(var i = length1; i < length2; i++){
    		    	   table_header += '<td>'+classNOArr[i]+'</td>';
    			   }
    			   for(var i = 0; i < timeArr.length; i++){
    				   table_body += '<tr>'
    			   				   + '<td width="10%">' 
    			   				   + '<button style="width:15px;height:10px;background:'+colorArr[i]+';" disabled></button>' //数据视图彩色图例
    			   					+ timeArr[i]+'</td>';
    				   for(var j = length1; j < length2; j++){
    					   table_body +='<td style="border:1px #ff000 solid">'+dataArr[j][i]+'</td>';
    				   }
    			   	table_body += '</tr>';
    			   }
    		   }
    		  
    		    function seriesArr(){
    		    	var serie = [];
    		    	for(var i = 0; i < timeArr.length; i++){
    					var item = {
    					           name:timeArr[i],
    					           type:'bar',
    					           barMaxWidth : 50,
    					           stack: '各班迟到次数统计',
    					           data : seriesData[i],
    					           itemStyle: {
    					        	   normal:{
    					        		   color:colorArr[i]
    					        	   }
    					           }
    					         };
    					serie.push(item);
    		    	}
    		    	return serie;
    		    }

    			var myChart = echarts.init(DOM.get('#main'));
    			option = {
    				    tooltip : { //tooltip:气泡提示框，常用于展现更详细的数据
    				        trigger: 'item',    //或'axis'
    				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    				        }
    				    },
    				    legend : {//legend:图例，表述数据和图形的关联
    				    	data:timeArr
    				    },
    				    toolbox : {
    						right : "10%",
    						show : true,
    						feature : {
    							mark : {
    								show : true
    							},
    							dataView : {
    								show : true,
    								readOnly : true,
    								optionToContent: function(opt) {
    								    var series = opt.series;
    								    var table = '<div style="width:100%;height:100%;text-align:center;border:2px solid #333">'
    								    		+'<table class="table table-bordered" style="width:100%;text-align:center;border:1px solid #333"><tbody><tr>'
    								    	    + table_header
    								            + '</tr>'
    								            + table_body 
    								            + '</tbody></table></div>';
    								    return table;
    								}
    							},
    							restore : {
    								show : false
    							},
    							saveAsImage : {
    								show : true
    							},
    						}
    					},
    				    grid : {  //grid:直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
    				        left: '3%',
    				        right: '4%',
    				        bottom: '3%',
    				        containLabel: true
    				    },
    				    xAxis : [//xAxis: 直角坐标系中的横轴，通常并默认为类目型
    				        {
    				            type : 'value', 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
    				        }
    				    ],
    				    yAxis : [ //yAxis	直角坐标系中的纵轴，通常并默认为数值型
    				        {
    				            type : 'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
    				            data : typeArr,
    				            name : '班级'
    				        }
    				    ],
    				    series : seriesArr() //数据系列
    			};
    	        myChart.setOption(option);
    			
    			//图例点击事件，全部取消选中时纵坐标显示为空。
    			myChart.on('legendselectchanged', function(obj) {
//    				console.log(option.yAxis[0].data);
    		        var selected = obj.selected;
    		        var option = myChart.getOption();
//    		        myChart.clear();
    		        for(var i = 0,j = 0;i < timeArr.length;i++){
    		        	if(selected[timeArr[i]] == false) 
    		        		j += 1;
    		        }
    		        if(j == timeArr.length){
    		        	for(var i = 0;i < timeArr.length;i++){
    			        	selected[timeArr[i]] = true; 
    			        }
    		        }
    		        myChart.setOption(option,true);
    		    });
    		}
    		
    		
    		/*根据始末月份获取该范围内所有月份*/
    		function getAllMonth(time_s,time_e) {
    			var startTime = new Date(time_s).getTime();//  转换为时间戳
    			var endTime = new Date(time_e).getTime();// 转换为时间戳
    			var arr = [];// 存放结果
    			var format  = function(time) {// 最后的格式转换
    			    var date = new Date(time);
    			    return (date.getMonth() < 9)?(date.getFullYear() + '-0' + (date.getMonth() + 1)):(date.getFullYear() + '-' + (date.getMonth() + 1));//1-9?￡???油0
    			};
    			var isLeapYear = function(year) { 
    				return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);// 判断是否为闰年
    			};
    			// 月份映射 假设不为闰年
    			var MONTH = {
    			    '1': 31,
    			    '2': 28,
    			    '3': 31,
    			    '4': 30,
    			    '5': 31,
    			    '6': 30,
    			    '7': 31,
    			    '8': 31,
    			    '9': 30,
    			    '10': 31,
    			    '11': 30,
    			    '12': 31
    			};
    			arr.push(time_s);
    			if(time_s!=time_e){
    				while (startTime < endTime) {
    				    var start = new Date(startTime);// 转换时间格式
    				    if (isLeapYear(start.getFullYear()) && (start.getMonth() + 1 === 2)) {// 判断是否为闰年的2月份
    				        startTime = startTime + 29 * 24 * 60 * 60 * 1000;
    				    } else {
    				        startTime = startTime + MONTH[start.getMonth() + 1] * 24 * 60 * 60 * 1000;
    				    }
    				    arr.push(format(startTime));
    				}
    			}
    			return arr;
    		}
    		
	  });
    </script>
</html>

代码还存在一些问题，后续添加一些简单功能并逐渐完善，比如说实现可选定只查某一个班级的数据等等。

希望我的分享能让学习相关知识的同学有所收获，欢迎大家批评指正，有什么好的方法和建议欢迎大家指教，万分感谢！

denglishang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
如何用echarts生成每日考勤工时成本分析图表
docow的博客
12-06 754
最近参与开发考勤管理系统，里面有各种统计分析图表，可以用的图表组件也选了很多，有highcharts, echarts, 因为学习成本和文档阅读便利性，所以最终选择了echart做为图表组件，记录一下学习，下面是图表效果 要使用Echarts首先就要引入echarts文件 echarts.js文件可在echarts的官方中文网站下载然后配置echarts图表选项 接着我们把刚才的选项代码给复制过来并赋值给option对象 myChart.setOption(option); 最后图表就生成了
echarts漂亮的柱状图按月统计
ICode联盟
05-14 803
下载地址 基于echarts实现的漂亮的柱状图按月统计，彩色样式。 dd:
Echarts在一个容器中绘制多张横向条形统计图
weixin_38974419的博客
01-18 2128
今天做项目中的一个图表统计时遇到一个问题 ：这个图表有3个横向的条形统计图组成，起初是写了3个容器分别在里面绘制各自的横向条形统计图，用模拟的动态数据时没有任何问题，当接入后台数据后发现，如果有两个图表的数据都为空时(尤其是第二个和第三个图表数据同时为空时)，数据更新后重新配置并绘图，会存在后两个图表Echarts实例丢失问题，也就是后两个容器中并不会绘图出来。所以，转变思路，在一个容器一个图层上...
echarts图表页面，sql 按日，周，月统计
weixin_43190879的博客
08-14 5668
首先先说需求，页面echarts图形控件，需要根据时间跨度间隔不同，页面不知如何实现不同时间跨度，所以用sql实现， 数据库表接口，日期字段是day 格式是vachar(2),统计字段userAdd 如果你表内时间字段格式是date类型的就不用to_date(day,‘YYYY-MM-dd’)转换了， 1.按天统计sql语句很好写 传入参数，开始时间startDate，结束时间endDate,统计...
若依框架做柱形图，根据用户创建时间，统计每个月的人数的柱形图，参考的是Apache ECharts
cgwxzg的博客
05-19 1592
若依框架做一个柱形图，根据若依注册人数和注册月份。
可视化模板五：用echarts实现多组条形图&堆叠条形图
最新发布
01-21
本知识点将深入探讨如何使用ECharts实现多组条形图和堆叠条形图。 首先，我们需要了解ECharts的基本使用。ECharts是基于HTML5 Canvas技术构建的，因此在HTML文件中需要引入ECharts的库文件，通常为`echarts.min.js`...
水平堆叠条形图源码（QT,C++).zip
04-11
水平堆叠条形图是一种常用于数据可视化的方法，它通过将多个相关数据系列横向堆叠在一起来展示每个类别的总和以及各个部分所占的比例。在这个"水平堆叠条形图源码（QT，C++）"项目中，我们可以深入学习如何使用QT库...
echarts地图下钻、柱状、条形完美结合
08-08
本文将详细讲解如何在Echarts中实现地图、柱状图和条形图的完美结合以及下钻功能。 首先，我们要理解“地图下钻”（Map Drilling）的概念。地图下钻通常指的是在地图上点击某一区域后，地图会自动放大到该区域，...
echarts多维条形图 柱状图作图
07-22
echarts多维条形图 柱状图作图，来自官网代码，图形化 展示 大数据 信息
echarts 实现时间进度堆叠图或者时间状态区间图
nihdxv的博客
10-12 1903
工作中涉及需求，是通过甘特图进行修改得来的： 参考案例1： 官方案例 效果： 参考案例2： 官方案例 效果： 根据自己的需求进行整理，原文地址在这
vue2.X 中使用 echarts5.4.0实现项目进度甘特图
weixin_44021888的博客
09-07 1868
vue2.X 中使用 echarts5.4.0实现项目进度甘特图
ECharts 实现甘特图实例（自定义生成）
Ajax的博客
08-30 8297
需求:公司OA，要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图效果： 描述: 甘特图y轴是根据搜索条件（时间段和研发组）查询数据库，查询这段时间该 项目组研发的项目，x轴根据时间段生成刻度间距，但保持为七个刻度。代码：<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
echarts实现甘特图
FinelyYang的专栏
06-30 7260
效果如下图：y轴为餐桌编号，x轴为客人预订的时间： 以8号餐桌为例，甘特数据为阴影部分，表示不同时间段客人用餐占用的时间。如果时间段有交集则说明有时间冲突，应做时间调整。 vue 部分代码： <template> <div id="gt-chart" ref="gt-chart"></div> </div> </template> <script> //初始化柱状图...
使用 Echarts 实现项目进度甘特图
热门推荐
未名部落格
11-22 4万+
Echarts 功能十分强大，可以实现多种图表效果，下面简单介绍下最近使用Eharts 实现的一个项目进度甘特图。 下面是实现的效果： 目录 一.概览 Echarts 基本内容 1.官网文档 2.查看示例 二.需求分析 1.数据系列（series） 2.标线 （markLine） 3.数据对象结构 4.“超时”、“按时”划分 三.引入并配置 Echarts 1...
Echarts之甘特图&&type: ‘custom‘参数详解
c_x_m的博客
12-26 3248
type: ‘custom’,参数详解 1.renderItem：2.let categoryIndex = api.value(0)3.let start = api.coord([api.value(1), categoryIndex]) let end = api.coord([api.value(2), categoryIndex])4.height = api.size([0, 1])[1] 5.encode: 内部参数： ①、 x: [1, 2], // data 中『维度1』和『维度2』对
echart markLine x轴 两点之间 或 日期之间 的竖线箭头
sy_yan的博客
08-06 1610
前端 echart markLine 实现 在x轴两个月份中间 动态画一条标线箭头
vue中使用Echarts制作甘特图+时间粒度的调节
m0_61973243的博客
01-17 803
直接放在echarts示例中即可看到效果。
echarts实现甘特图（项目进度/任务进度）
冉冉胜起博客
03-19 1万+
1.先看效果图： 2.代码部分我只贴出来option部分，其余的都是一样的；也可参考官网地址： https://www.echartsjs.com/examples/zh/index.html#chart-type-bar https://www.echartsjs.com/zh/option.html#title 3. var option = { bac...
echarts堆叠条形图
07-28
对于Echarts堆叠条形图的绘制，你可以按照以下步骤进行操作： 1. 安装Echarts库：首先，确保你在项目中已经安装了Echarts库。你可以通过npm或者直接引入CDN来安装。 2. 导入Echarts库：在你的HTML文件中，通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值