舞林cuzn blog舞林cuzn blog

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

html:

<div class="fl" id="aveList" style="width:50%;">

<div class="ave-block" style="margin-left:-30px;"></div>

<div class="ave-block" style="margin-left:-30px;"></div>

</div>

js:

//渲染付费

var aveList = [

   {

    name : '当月第3日/总30日', //名称

    percentage : null, //百分比

    value : 47.39, //值

    growthRate : '时间进度' //增长率

   },

   {

    name : '当月$112,369.56/上月$124,547.36', //名称

    percentage : null, //百分比

    value : 20.58, //值

    growthRate : '流水进度' //增长率

   }

];

$el.find("#aveList > .ave-block").each(function(i){

_fns.cirProgress($(this), aveList[i]);

});

js调用方法函数：

//圆形进度功能($el-容器,opt-参数)

  cirProgress : function($el, opt){

  if($el.length <= 0){return;}

  opt = $.extend({

  name : '', //名称

  percentage : 0, //百分比

  value : 0, //值

      growthRate : 0, //增长率

      radius : 60 //园的半径

  }, opt);

  var _fns = this;

  if(opt.percentage!=null&&opt.percentage > 100){opt.percentage = 100;}

  $el.empty();

  var w = $el.width();

  var h = $el.height();

  var renderer = new Highcharts.Renderer($el[0], w, h);

  renderer.circle(w/2, h/2, opt.radius).attr({

       fill: '#FFF',

       stroke: '#e2e5e8',

       'stroke-width': 10

  }).add();

  //填充进度颜色

  if(opt.percentage!=null)

  {

  renderer.arc(w/2, h/2, opt.radius-5, opt.radius+5, -Math.PI/2, opt.percentage*Math.PI/50-Math.PI/2).attr({

       fill: opt.percentage === 100 ? '#00c5b5' : '#0095c3'

  }).add();

}

  else

  {

renderer.arc(w/2, h/2, opt.radius-5, opt.radius+5, -Math.PI/2, opt.value*Math.PI/50-Math.PI/2).attr({

       fill: opt.value === 100 ? '#00c5b5' : '#0095c3'

  }).add();

  }

  var group = renderer.g().css({fontFamily:'arial',color:'#666666',fontSize:'14px'}).add();

  //百分比

  if(opt.percentage==null){

  renderer.text('');

  }

  else{

renderer.text(_fns.numFixd(opt.percentage)+'%', w/2, h/2-30).attr({"text-anchor":"middle"}).add(group).css({fontWeight:'bold'}).add(group);

  }

  //值

var express = /^\d+$/;

if (express.test(opt.value)) {

  // 则为整数

  renderer.text(_fns.qfw(opt.value), w/2, h/2+5).attr({"text-anchor":"middle"}).css({fontSize:'20px',fontWeight:'bold'}).add(group);

}

else{

renderer.text(opt.value+'%', w/2, h/2+5).attr({"text-anchor":"middle"}).css({fontSize:'20px',fontWeight:'bold'}).add(group);

}

//增长率

  if(isNaN(opt.growthRate))

  {

  var group2 = renderer.g().add(group);

  renderer.text(opt.growthRate, w/2-25, h/2+35).css().add(group2);

  }

  else

  {

  var group2 = renderer.g().add(group);

  var rt = _fns.numFixd(opt.growthRate,1);

  var gap = (rt+'').length !== 1 ? (rt+'').length > 3 ? -7 : 0 : 5;

  var img = rt > 0 ? 'arr-up' : 'arr-down';

  renderer.text(Math.abs(rt)+'%', w/2-10+gap, h/2+35).css().add(group2);

  renderer.image('static/img/'+img+'.png', w/2-25+gap, h/2+21, 12, 15).css({float:'right'}).add(group2);

  }

  //标题name

  //renderer.text(opt.name, w/2, 30+opt.radius+h/2).attr({"text-anchor":"middle"}).add(group);

  renderer.text(opt.name, w/2, 30+opt.radius+h/2).attr({"text-anchor":"middle"}).css({color:'#666',fontWeight:'bold'}).add(group);

  }

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

highcharts:

drawOpts[4].yKeys=[{key : 'a', name : 'A',  anti:true}]

drawOpts[0].yKeys.push({key : j.key,name : j.name});

    chart: {

           type: 'waterfall'

       },

    legend: {

           layout: 'vertical',

           align: 'right',

           verticalAlign: 'middle',

           borderWidth: 0,

           width:100

       },

       colors: ['#428BCA','#5CB85C','#F2B661'],

xAxis:{

        labels:{

        enabled:true,

        step:1

        },

            tickWidth:0

       },

       yAxis: [{

        //gridLineWidth:0,

           labels: {

               format: '{value}K'

           },

           title: {

               text: ''

           }            

   }],

tooltip: {

           enabled:true,

           crosshairs:false,

           borderColor:'#666666',

           borderRadius:0,

           backgroundColor:'#666666',

           style: {

color: '#fff',

fontSize: '12px',

padding: '8px'

},

           formatter: function () {

            var s = this.x;

               $.each(this.points, function () {

                s += '<br />'+this.series.name+': '+this.point.y+'<br/>';

               });

               return s;

           }

       }

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权