// var getname = <#=GRID65.A2$#>; // var getvaluenum = <#=GRID65.C2$#>; // var getxlmc =<#=GRID65.C1$#>; var getname = ['a','b','c','d','e']; var getvaluenum = [10,20,30,48,10,40,50,60,10,20,70,80,90,10,65,100,110,120,45,88]; var getxlmc =['语文','数学','英语','物理','化学']; var getxlmcnum=getvaluenum.length/getname.length; var getvalue = []; for (let i = 0; i < getxlmcnum; i++) { getvalue[i] = []; for (let j = 0; j < getname.length; j++) { getvalue[i][j] = Number(getvaluenum[i*getname.length+j]); } } var color1 = ['#63B4FF', '#FFD19A', '#64F0BC', '#BDBCFF', '#FFA387','#63B4FF', '#FFD19A', '#64F0BC', '#BDBCFF', '#FFA387']; var color2 = ['#1890FF', '#FFD283', '#47D095', '#9C9BFF', '#FF6388','#1890FF', '#FFD283', '#47D095', '#9C9BFF', '#FF6388']; var getvaluesum=[]; for(var i=0;i(b-a)); console.log('getvaluesum',getvaluesum) console.log('tempSumArr',tempSumArr) var indexList = [] tempSumArr.map(item=>{ let startIndex = getvaluesum.indexOf(item) while(indexList.indexOf(startIndex) > -1) { startIndex = getvaluesum.indexOf(item,startIndex + 1); } indexList.push(startIndex) }) var newSortXName = [] var newSortYValue = [] console.log('indexList',indexList) indexList.map(item=>{ newSortXName.push(getname[item]) }) getvalue.map((item,index)=>{ newSortYValue[index] = [] indexList.map(indexItem=>{ newSortYValue[index].push(item[indexItem]) }) }) var maxnum = Math.max.apply(null, getvaluesum); var maxlen = Math.pow(10, String(Math.ceil(maxnum)).length - 2); if (maxnum >= 5) { var max = Math.ceil(maxnum / (.95 * maxlen)) * maxlen; } else { var max = 5; } var series = []; for (var i = 0; i < getxlmc.length; i++) { series.push({ name: getxlmc[i], type: 'bar', data: newSortYValue[i], stack: '各专业本科生年级分布', barWidth: '20px', itemStyle: { normal: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: color1[i] // 0% 处的颜色 }, { offset: 1, color: color2[i] // 100% 处的颜色 }], }, barBorderRadius: [0, 0, 0, 0], label: { show: false, position: 'top', textStyle: { fontSize: 12, color: '#666666', }, } } }, }) } optiondqt = { grid: { top: '33', right: '15', left: '50', bottom: '55' }, tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, backgroundColor: 'rgba(21, 64, 92, 0.9)', formatter: function(params) { var str = ''; //声明一个变量用来存储数据 str += '

' + params[0].name + '

'; for (var i = 0; i < getxlmcnum; i++) { if (params[i]) { if (params[i].value > 0) { str += '' + params[i].seriesName + '本科生人数 ' + params[i].value + '人
'; } } } return str; } }, legend: { type: "scroll", right: '10', top: '0', data: getxlmc, itemGap: 25, itemWidth: 16, itemHeight: 16, textStyle: { fontSize: '13', color: '#666666', }, }, xAxis: [{ data: newSortXName, axisLabel: { interval: 0, formatter: function(value) { var ret = ""; //拼接加\n返回的类目项 var maxLength = 6; //每项显示文字个数 var valLength = value.length; //X轴类目项的文字个数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1) //如果类目项的文字大于5, { for (var i = 0; i < rowN; i++) { var temp = ""; //每次截取的字符串 var start = i * maxLength; //开始截取的位置 var end = start + maxLength; //结束截取的位置 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 temp = value.substring(start, end) + "\n"; ret += temp; //凭借最终的字符串 } return ret; } else { return value; } }, margin: 10, color: '#666666', textStyle: { fontSize: 13, fontWeight:400 }, }, axisLine: { lineStyle: { color: '#B0C5DB', } }, axisTick: { show: false }, }], yAxis: [{ min: 0, max: max, // 计算最大值 interval: max / 5, // 平均分为5份 splitNumber: 5, name: '人', nameTextStyle: { color: '#999999', fontSize: 13, padding: [0, 0, 0, -40] }, axisLabel: { color: '#666666', textStyle: { fontSize: 13 }, }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: '#CCDBEB', type: 'dashed', opacity: 0.5 } } }], series: series }; var series = optiondqt["series"]; var fun = function(params) { var datavalue = 0; for (var i = 0; i < series.length; i++) { datavalue += series[i].data[params.dataIndex] } return datavalue; } if (series[series.length - 1]) { series[series.length - 1]["itemStyle"]["normal"]["label"]["show"] = true; series[series.length - 1]["itemStyle"]["normal"]["label"]["formatter"] = fun; series[series.length - 1]["itemStyle"]["normal"]["barBorderRadius"] = [3, 3, 0, 0]; } myChart.on("legendselectchanged", function(object) { var b = object.selected, //图例的选中情况，key是图例的name，value是true或false d = []; //选中的series的index列表 for (var key in b) { if (b[key]) { //选中的图例 for (var i = 0; i < series.length; i++) { var changename = series[i]["name"]; if (changename == key) { d.push(i); //选中的series的index列表 } } } } var fn = function(params) { var datavalue = 0; for (var i = 0; i < d.length; i++) { for (var j = 0; j < series.length; j++) { if (d[i] == j) { datavalue += series[j].data[params.dataIndex]; } } } return datavalue; } for (var j = 0; j < series.length; j++) { series[j]["itemStyle"]["normal"]["label"]["show"] = false; series[j]["itemStyle"]["normal"]["barBorderRadius"] = [0, 0, 0, 0]; } var l_s = series[d[d.length - 1]]; //选中的series的最后一个 if (l_s != null && l_s != "" && l_s != undefined) { l_s["itemStyle"]["normal"]["label"]["show"] = true; //显示label l_s["itemStyle"]["normal"]["label"]["formatter"] = fn; //绑定formatter l_s["itemStyle"]["normal"]["barBorderRadius"] = [3, 3, 0, 0]; } myChart.setOption(optiondqt) }) return optiondqt;

降序堆叠