echarts如何做出堆积图总计的效果
首先说下,我这这数据是假数据,实际是公司做图的一部分数据自己修改了下下,不涉及泄密什么的.
第一.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,方便嘛.有什么不对的地方还请多多指教.
