首先說下,我這這數據是假數據,實際是公司做圖的一部分數據自己修改了下下,不涉及泄密什么的.
第一.echarts本身是沒有這個在柱子上面加total的這點大家默認下就好了,因為我不是什么前端專職程序員,有點js我就寫點啦,就是個三腳貓,放出來大家共勉下,老鳥飛過就好.
第二.我做這個總計真的是各種問人,自己也翻了echarts官網不少栗子來的,但是看栗子的話真的沒有類似的柱狀堆積圖.
第三.我說下我的思路,其實在中午吃飯之前我已經有了思路,已經寫在我的eclipse上了,哈哈抄:
1).最后加一個總計的系列serie,需要根據legend的變化而變化,所以還需要綁定legend的切換事件,講label設置在底部,背景顏色為透明
2).就只為了顯示label達到總計效果
3).在切換事件里面重新計算總計,根據選中的legend的狀態進行增加或者減少(這里減少是我想當然其實沒有減法運算,是根據legend的狀態重新加一遍而已啦)
碼字大家都不願意看,上效果圖:
然后當然插播一段整個代碼(不要擔心,我已經把源碼准備給大家了,以及echarts和jquery的js文件也在里面,json文件也有了,這么說呢就是直接解壓放在服務器上面就能看到我這個簡陋的圖了,配色字體什么都基本是默認,將就下):
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <title>堆積圖總計</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-family: arial; font-size: 14px; font-weight: bold; margin-left:200px; } #main{ height: 600px; width: 800px; margin: 130px 100px 100px 100px; } div ul li{ display:block; width:100%; text-align:center; margin-bottom:3px; } div ul li a:link,div ul li a:hover{ display:block; width:100%; text-align:center; line-height: 22px; text-decoration:none; color:white; } div ul li a:hover{ background-color:orange; } .overflow-y{ overflow-y:auto; height: 180px; width:100%; } .clpd{ padding:0; backgound-color:#ccc; } </style> </head> <body class="pos-r"> <div id="main"> </div> </body> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- 目前開發先使用其源文件 --> <script type="text/javascript" src="js/echarts.js"></script> <!-- 在這里書寫js代碼 --> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); var count = 0; myChart.showLoading(); $.get("data/stack.json").done( function(result){ result = eval("("+result+")"); myChart.hideLoading(); var names = result.name; myChart.setOption(option={ title: { text: result['title'], left: 'center', textStyle: { color: 'black' } }, tooltip : { trigger: 'axis', axisPointer : { // 坐標軸指示器，坐標軸觸發有效 type : 'shadow' // 默認為直線，可選為：'line' | 'shadow' } }, legend:{ top: 'bottom', data:names }, toolbox: { show : true, orient:'vertical', calculable : true, feature : { mark : {show: true}, dataZoom : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line']}, restore : {show: true}, saveAsImage : {show: true}, myTool1: { show: true, title: '數字切換', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick: function (){ count++; if(count%2 == 0){ myChart.setOption({series:labels(names)}); }else{ myChart.setOption({series:nolabels(names)}); } } } } }, grid: { left: '3%', right: '4%', bottom: '12%', containLabel: true }, xAxis:[ { type : 'category', data : result['month'] } ], yAxis:[ { type:'value', axisLine: { show: false } } ], series: series(result,names) }); //最后加一個總計的系列serie,需要根據legend的變化而變化,所以還需要綁定legend的切換事件,講label設置在底部,背景顏色為透明 //就只為了顯示label達到總計效果 //在切換事件里面重新計算總計,根據選中的legend的狀態進行增加或者減少 var totals = buildTotal(); myChart.setOption({series:seriess(result,names,totals)}); //legend切換事件上進行total的重 計算 myChart.on('legendselectchanged', function (params) { var legends = params.selected; var keys = Object.keys(legends); var totals = reBuildTotal(legends,keys); myChart.setOption({series:seriess(result,names,totals)}); }); } ); //第一次不加總計時構建的series對象 function series(result,names){ var series=[]; for(var i=0;i<names.length;i++){ var serie = { name: names[i], type:'bar', stack:'含量', label: { normal: { show: true, textStyle:{ color:'#000' }, formatter:function(params){ return sliceDecimal(params.data); } } }, data:result[names[i]] } series.push(serie); } return series; } //重新構件series數組 function seriess(result,names,totals){ var series=[]; for(var i=0;i<names.length;i++){ var serie = { name: names[i], type:'bar', stack:'含量', label: { normal: { show: true, textStyle:{ color:'#000' }, formatter:function(params){ return sliceDecimal(params.data); } } }, data:result[names[i]] } series.push(serie); } var serie = buildTotalSerie(totals); series.push(serie); return series; } //組織serices里面的數據變成想要的加總數組,就是按列求和,然后返回這個列求和的數組 function buildTotal(){ var series = myChart.getOption().series; var totalLength = series[0].data.length; var totals = []; for(var k = 0;k<totalLength;k++){ totals[k] = 0; } for(var i=0;i<series.length;i++){ for(var j=0;j<series[i].data.length;j++){ totals[j] += series[i].data[j]; } } return totals; } //重新組織serices里面的數據變成想要的加總數組 function reBuildTotal(legends,keys){ var series = myChart.getOption().series; var totalLength = series[0].data.length; var totals = []; for(var k = 0;k<totalLength;k++){ totals[k] = 0; } for(var i=0;i<series.length-1;i++){ var name = series[i].name; for(var j=0;j<series[i].data.length;j++){ if(legends[keys[i]] === true){ totals[j] += series[i].data[j]; } } } return totals; } //構建總計serie對象 function buildTotalSerie(totals){ var isZero = isAllZero(totals); var serie = {}; if(isZero === false){ serie = { name: "總計", type:'bar', stack:'含量', itemStyle:{ normal:{ color:'rgba(0,0,0,0)' } }, label: { normal: { position:'insideBottom', show: true, textStyle:{ color:'#000', fontStyle:'normal', fontSize:'16', fontWeight:'bold' }, formatter:function(params){ return "Total"+sliceDecimal(params.data); } } }, data:totals }; }else{ serie = { name: "總計", type:'bar', stack:'含量', itemStyle:{ normal:{ color:'rgba(0,0,0,0)' } }, label: { normal: { position:'insideBottom', textStyle:{ color:'#000', fontStyle:'normal', fontSize:'16', fontWeight:'bold' }, formatter:function(params){ return 0; } }, emphasis: { position:'insideBottom', textStyle:{ color:'#000', fontStyle:'normal', fontSize:'16', fontWeight:'bold' }, formatter:function(params){ return 0; } } }, data:totals }; } return serie; } //判斷數組內所有數字全部為0,如果是返回true,如果不全是返回false function isAllZero(totals){ for(var i = 0;i<totals.length;i++){ if(totals[i] !== 0){ return false; } } return true; } function labels(names){ var labels = []; for(var i=0;i<names.length;i++){ var label = {label:{ normal: { show: true, textStyle:{ color:'#000' }, formatter:function(params){ return sliceDecimal(params.data); } } } } labels.push(label); } return labels; } function nolabels(names){ var labels = []; for(var i=0;i<names.length;i++){ var label = {label:{ normal: { show: false, textStyle:{ color:'#000' }, formatter:function(params){ return sliceDecimal(params.data); } } } } labels.push(label); } return labels; } /** 千分位用逗號分隔 */ function sliceDecimal(num){ if(num) { if(''==num || isNaN(num)){return 'Not a Number ! ';} num = num + ''; var sign = num.indexOf("-")> 0 ? '-' : ''; var cents = num.indexOf(".")> 0 ? num.substr(num.indexOf(".")) : ''; cents = cents.length>1 ? cents : '' ; num = num.indexOf(".")>0 ? num.substring(0,(num.indexOf("."))) : num ; if('' == cents){ if(num.length>1 && '0' == num.substr(0,1)){return 'Not a Number ! ';}} else{if(num.length>1 && '0' == num.substr(0,1)){return 'Not a Number ! ';}} for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) { num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3)); } return (sign + num + cents); } } </script> </html>
最后給你們看下我在sublime目錄結構,建議大家可以安裝個sublimeserver,方便嘛.有什么不對的地方還請多多指教.
