原型图类似如下：
<!DOCTYPE > <html> <head> <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script> <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> </head> <body> <div id="container" style="width:800px;height:400px"></div> <script> $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: '堆叠柱形图' }, xAxis: { categories: ['三年级一班', '三年级二班', '三年三班', '三年级四班', '三年级五班'] }, yAxis: { min: 0, title: { text: '' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + '总量: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black' } } } }, series: [{ name: '未到', data: [1, 1, 2, 1, 2] }, { name: '迟到', data: [2, 2, 3, 2, 1] }, { name: '已到', data: [8, 9, 10, 11, 12] }] }); }); </script> </body> </html>
异步加载数据
// 异步加载数据 $("#queryCount").on("click", function() { var numb = 0; numb = validate(numb); if (numb == 1) { return; } $.ajax({ url : "/bison/signIn/count/countOrgan", async : false, data : { beginDate : $("#beginTime").val(), endDate : $("#endTime").val(), personSex : $("#personSex").val(), organIds : getOrganIds(), signSetId : $("#signSet option:selected").val(), }, type : 'POST', dataType : 'json', success : function(data) { // 成功时执行的回调方法 category_data = data.returnData.response.categor; natural_data = data.returnData.response.normalList; late_data = data.returnData.response.lateList; absent_data = data.returnData.response.absentList; fun(category_data, natural_data, late_data, absent_data); }, error : erryFunction // 错误时执行方法 }); function erryFunction() { layer.alert('请联系超管，数据返回失败', { icon : 3 }); } ; }); ============== 在项目中需要用到的：  <!-- 柱状统计图 --> <div id="main" style="width: 900px; height: 350px; margin-top:40px;"></div> ========= sigount: var signCount = function() { // 基于准备好的dom，初始化echarts实例 var category_data // x轴信息 var natural_data; // 正常数据 var late_data; // 迟到数据 var absent_data; // 未到数据 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 function fun(category_data, natural_data, late_data, absent_data) { myChart.setOption({ title: { text: $("#signSet option:selected").val() == '' ? $("#signSet option:eq(1)").html() : $("#signSet option:selected").html(), }, color : [ '#2474f6', '#006699', '#d84a38' ], tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend : { data : [ '正常', '迟到', '未到' ] }, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, xAxis : [ { type : 'category', data : category_data } ], yAxis : [ { type : 'value' } ], series : [ { name : '正常', type : 'bar', data : natural_data }, { name : '迟到', type : 'bar', data : late_data }, { name : '未到', type : 'bar', data : absent_data, markLine : { lineStyle : { normal : { type : 'dashed' } }, data : [ [ { type : 'min' }, { type : 'max' } ] ] } }, ] }); } //第一次默认加载数据 getFirstChart(); function getFirstChart(){ var m = parseInt(new Date().getMonth())+1; $.ajax({ url : "/bison/signIn/count/toCount", data : { beginDate : new Date().getFullYear()+"-"+m+"-"+new Date().getDate(), endDate : new Date().getFullYear()+"-"+m+"-"+new Date().getDate(), countStyle : 0, signSetId : $("#signSet option:eq(1)").val(), }, type : 'POST', dataType : 'json', success : function(data) { // 成功时执行的回调方法 category_data = data.returnData.response.categor; natural_data = data.returnData.response.normalList; late_data = data.returnData.response.lateList; absent_data = data.returnData.response.absentList; fun(category_data, natural_data, late_data, absent_data); }, }); } // 下拉框的改变事件 $("#countStyle").change(function() { if ($("#countStyle").val() == '0') { $("#beginTime1").show(); $("#endTime1").show(); $("#beginTime2").hide(); $("#endTime2").hide(); $("#beginTime3").hide(); $("#endTime3").hide(); } else if ($("#countStyle").val() == '1') { $("#beginTime1").hide(); $("#endTime1").hide(); $("#beginTime2").show(); $("#endTime2").show(); $("#beginTime3").hide(); $("#endTime3").hide(); } else { $("#beginTime1").hide(); $("#endTime1").hide(); $("#beginTime2").hide(); $("#endTime2").hide(); $("#beginTime3").show(); $("#endTime3").show(); } }); // 异步加载数据 $("#queryCount").on("click", function() { var numb = 0; var beginDate; var endDate; if ($("#signSet option:selected").val() == "") { layer.alert('选择签到不可以为空', { icon : 3 }); return; } // 验证年月日 if ($("#countStyle").val() == '0') { numb = valicateYearMonthDate(numb); if (numb == 1) { return; } beginDate = $("#beginTime1").val(); endDate = $("#endTime1").val(); } // 验证年月 if ($("#countStyle").val() == '1') { numb = valicateYearMonth(numb); if (numb == 1) { return; } beginDate = $("#beginTime2").val(); endDate = $("#endTime2").val(); } // 验证年 if ($("#countStyle").val() == '2') { numb = valicateYear(numb); if (numb == 1) { return; } beginDate = $("#beginTime3").val(); endDate = $("#endTime3").val(); } // 获得后台数据 $.ajax({ url : "/bison/signIn/count/toCount", async : false, data : { beginDate : beginDate, endDate : endDate, personSex : $("#personSex").val(), organId : $("#organId option:selected").val(), organName : $("#organId option:selected").html(), countStyle : $("#countStyle").val(), signSetId : $("#signSet option:selected").val(), }, type : 'POST', dataType : 'json', success : function(data) { // 成功时执行的回调方法 category_data = data.returnData.response.categor; natural_data = data.returnData.response.normalList; late_data = data.returnData.response.lateList; absent_data = data.returnData.response.absentList; fun(category_data, natural_data, late_data, absent_data); }, error : erryFunction // 错误时执行方法 }); function erryFunction() { layer.alert('请联系超管，数据返回失败', { icon : 3 }); } ; }); // 验证年月日 function valicateYearMonthDate(numb) { if ($("#beginTime1").val() == '') { layer.alert('开始日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#beginTime1").val()) == 0){ layer.alert('开始日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if ($("#endTime1").val() == '') { layer.alert('结束日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#endTime1").val()) == 0){ layer.alert('结束日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if (validateDate($("#beginTime1").val(), $("#endTime1").val())) { layer.alert('结束日期不得小于开始日期', { icon : 3 }); numb = 1; return numb; } if (DateDiff($("#beginTime1").val(), $("#endTime1").val()) > 30) { layer.alert('按天统计日期跨距不能超过30天', { icon : 3 }); numb = 1; return numb; } } // 验证年月 function valicateYearMonth(numb) { if ($("#beginTime2").val() == '') { layer.alert('开始日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#beginTime2").val()) == 0){ layer.alert('开始日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if ($("#endTime2").val() == '') { layer.alert('结束日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#endTime2").val()) == 0){ layer.alert('结束日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if (validateDate($("#beginTime2").val(), $("#endTime2").val())) { layer.alert('结束日期不得小于开始日期', { icon : 3 }); numb = 1; return numb; } if (MonthDiff($("#beginTime2").val(), $("#endTime2").val()) > 12) { layer.alert('按月统计月份跨距不得超过12个月', { icon : 3 }); numb = 1; return numb; } } // 验证年 function valicateYear(numb) { if ($("#beginTime3").val() == '') { layer.alert('开始日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#beginTime3").val()) == 0){ layer.alert('开始日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if ($("#endTime3").val() == '') { layer.alert('结束日期不可为空', { icon : 3 }); numb = 1; return numb; } if(diffDate($("#endTime3").val()) == 0){ layer.alert('结束日期不能超过当前日期', { icon : 3 }); numb = 1; return numb; } if (validateDate($("#beginTime3").val(), $("#endTime3").val())) { layer.alert('结束日期不得小于开始日期', { icon : 3 }); numb = 1; return numb; } if (parseInt($("#endTime3").val()) - parseInt($("#beginTime3").val()) > 10) { layer.alert('按年统计跨距不得超过10年', { icon : 3 }); numb = 1; return numb; } } // 验证选中日期是否超过今天 function diffDate(evalue) { var dB = new Date(evalue.replace(/-/, "/")) if (new Date() > Date.parse(dB)) { return 1; } return 0; } // 验证结束日期大于开始日期 function validateDate(beginTime, endTime) { var bd = new Date(Date.parse(beginTime)); var ed = new Date(Date.parse(endTime)); return bd > ed; } // 计算两个日期之间的天数 function DateDiff(sDate1, sDate2) { // sDate1和sDate2是2006-12-18格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) // 转换为12-18-2006格式 aDate = sDate2.split("-") oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数 return iDays } // 计算两个日期之间的月数 function MonthDiff(date1, date2) { date1 = date1.split('-'); date1 = parseInt(date1[0]) * 12 + parseInt(date1[1]); date2 = date2.split('-'); date2 = parseInt(date2[0]) * 12 + parseInt(date2[1]); var m = Math.abs(date1 - date2); return m; } }();
