hcharts堆叠柱形图和异步加载

原型图类似如下：

异步加载数据

// 异步加载数据
$("#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});};
});==============
在项目中需要用到的：
![图片.png](https://upload-images.jianshu.io/upload_images/5640239-962155baccd310ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)=========
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, iDaysaDate = 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;}
}();

原文首发：https://www.jianshu.com/p/582299e18c7e

原文作者：祈澈姑娘
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！