html:

<!-- 块形转化率图 start -->
<div class="block-trans-box" id="blockTrans1" style="margin:10px;"></div>
<!-- 块形转化率图 end -->

css:
/*块形转化率图*/
.block-trans-box{margin:10px 20px;}
.block-trans{overflow: hidden;max-height: 250px;}
.block-trans .br-blocks{float: left;width: 120px;cursor:pointer;}
.block-trans .br-title{line-height: 30px;color: #333333;font-weight: bold;text-align: center;font-size: 14px;}
.block-trans .br-vk{background-color: #f0f0f0;color: #666666;padding-left: 10px;}
.block-trans .br-v{line-height: 23px;}
.block-trans .br-k{line-height: 30px;font-size: 16px;font-weight: bold;}
.block-trans .br-rate{height: 150px;background-color: #68b4ec;position: relative;}
.block-trans .br-rate span{position: absolute;top: 50%;left:0;margin-top: -15px;width: 100%;height: 30px;line-height: 30px;font-size: 18px;color: #FFF;text-align: center;}
.block-trans .br-gaps{float: left;width: 65px;height: 50px;padding-top: 92px;text-align: center;color: #666666;font-weight: bold; background: url("../img/arrs.png") center 109px no-repeat;background-size: 66% auto;}
/*后添加的样式*/
.block-trans .br-vname{line-height: 23px;font-size: 15px;font-weight: bold;font-family:"微软雅黑";}
.block-trans .br-key{line-height: 30px;font-size: 18px;font-weight: bold;}
.block-trans .br-gaps-s{float: left;width: 65px;height: 80px;padding: 82px 12px 0;text-align: center;color: #666666;font-weight: bold; background: url("../img/arrs.png") center 119px no-repeat;background-size: 66% auto;}
.block-trans .br-gasp-name{color:#f00;font-size: 15px;font-family:"微软雅黑";font-weight: normal;}
.block-trans .br-gasp-key{}



js:
/*块2 start*/
var btOpt1 = {
dom : $el.find("#blockTrans1"), //容器
data : null, //数据源
titles : ['第一', '第二', '第三', '第四', '第五'], //标题
resultKey : 'result4', //读取的key
name : '点击次数', //名称
numKey : 'd', //值key
secname:'市场费用',
   secnumKey:'d',
rateKey : 'c', //占比key
transRateName:'点击率',
transRateKey : 'c', 
test:'test' , //转化率key
clickCb : function(d,num){
console.log(num);
}
};
_fns.ajax({
url : _urls.table,
data : {},
cb : function(re){

btOpt1.data = re.data;
_fns.blockTransformShow(btOpt1);
}
});
/*块2 end*/

脚本调用函数:
//块形转化率图
  blockTransformShow : function(opt){
      opt = $.extend({
  dom : null, //容器
  data : null, //数据源
  resultKey : 'result', //数据源读取的key
  titles : [], //每块的标题
  name : '', //名称
  numKey : '', //值
  secname:'',
  secnumKey:'',
  rateKey : '', //占比
  transRateName:'',
  transRateKey : '' //转化率
  }, opt);
  var _fns = this;
  if(!opt.dom.length || !opt.data || !opt.data[opt.resultKey] || !opt.titles.length){return;}
  var wd = opt.dom.attr("width");
  var width = wd ? Number(wd)  :opt.dom.width() - 20;//容器总宽度
  if(!wd){opt.dom.attr("width", width);}
  var len = opt.titles.length;
  var blockWidth = width/((len - 1) * 0.88 +len); //块宽度
  var gapWidth = blockWidth * 0.38; //间隙宽度
  var h = 150; //块100%高度
  var colors = function(eq){
      var color = Highcharts.getOptions().colors;
      if(eq > 10){eq = eq%11;}
      return color[eq];
  };
  var $box = $('<div class="block-trans"></div>');
  $.each(opt.titles, function(i, j){
  var hh = h*opt.data[opt.resultKey][i][opt.rateKey]/100;
  var scolor = hh < 15 ? ' style="color:#333333;"' : '';
  //var gapStr = i ? ('<div class="br-gaps" style="width:'+gapWidth+'px;">'+opt.data[opt.resultKey][i][opt.transRateKey]+'%</div>') : '';
  //console.log(_fns.qfw(opt.data[opt.resultKey][i][opt.numKey]));
  var gapStr=i?('<div class="br-gaps-s" style="width:'+gapWidth+'px;"><div class="br-gasp-name">'+opt.transRateName+'</div><div class="br-gasp-key">'+opt.data[opt.resultKey][i][opt.transRateKey]+'%</div></div>') : '';
     var blockStr = '<div class="br-blocks" num="'+i+'" style="width:'+blockWidth+'px;"><div class="br-vk"><div class="br-vname">'+opt.name+'</div><div class="br-key">'+_fns.qfw(opt.data[opt.resultKey][i][opt.numKey])+'</div><div class="br-vname">'+opt.secname+'</div><div class="br-key">'+_fns.qfw(opt.data[opt.resultKey][i][opt.secnumKey])+'</div></div><div class="br-rate" style="background-color:'+colors(i)+';height:'+hh+'px;"><span'+scolor+'>'+opt.data[opt.resultKey][i][opt.rateKey]+'%</span></div></div>';
     $box.append(gapStr + blockStr); 
  });
  

  $box.find(".br-blocks").click(function(){
  $brstr=$(this);
  if(typeof opt.clickCb === 'function'){
  opt.clickCb(opt,$brstr.attr('num'));
  }
  });
  opt.dom.html($box);
  }

json:
{
"message":"操作成功!",
"data":{
"result":[
{"id":1,"a":2,"b":1,"c":5,"d":100,"e":"asb"},
{"id":2,"a":3,"b":3,"c":9,"d":80,"e":"aabb"},
{"id":3,"a":5,"b":6,"c":20,"d":60,"e":"aab"},
{"id":4,"a":10,"b":8,"c":25,"d":50,"e":"zab"},
{"id":5,"a":20,"b":9,"c":25,"d":31,"e":"flex"},
{"id":6,"a":8,"b":10,"c":12,"d":20,"e":"photo"},
{"id":7,"a":12,"b":11,"c":15,"d":36,"e":"2014-04-05"},
{"id":8,"a":22,"b":11,"c":18,"d":36,"e":"2014-12-26"},
{"id":9,"a":9,"b":17,"c":20,"d":39,"e":"work"},
{"id":10,"a":80,"b":100,"c":25,"d":31,"e":"sublime"},
{"id":11,"a":8,"b":10,"c":12,"d":35,"e":"dream"},
{"id":12,"a":12,"b":11,"c":15,"d":36,"e":"weaver"},
{"id":13,"a":22,"b":11,"c":18,"d":36,"e":"node"},
{"id":14,"a":9,"b":17,"c":20,"d":39,"e":"pad"},
{"id":15,"a":1,"b":10,"c":0,"d":40,"e":"ffu"}
],
"totalCount":100,
"totalPages":5,
"pageNo":1
},
"code":200
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

et_highlighter