jQuery 封装数据可视化圆环效果

最终效果：

HTML：（很显然，这是一个复用插件）

<div class="circle">
    <div class="circle-inner">
      <div class="loading-circle">
        <div class="circle-text"><span class="circle-span">0</span>%</div>
        <canvas class="canvas-mask" width="204" height="204"></canvas>
        <canvas class="canvas-bg" width="204" height="204"></canvas>
      </div>
    </div>
  </div>

  <div class="circle">
    <div class="circle-inner">
      <div class="loading-circle">
        <div class="circle-text"><span class="circle-span">0</span>%</div>
        <canvas class="canvas-mask" width="204" height="204"></canvas>
        <canvas class="canvas-bg" width="204" height="204"></canvas>
      </div>
    </div>
  </div>

Javascript：（基于jQuery/canvas ）

// 设计调用方式
  $(function () {
    $('.circle').circle({
      limit:75,             // 1 - 100(n)
      time:20,              // 1 - 1000(30)
      text:'.circle-span',  // 文本(id/class/html)
      canvas:'.canvas-mask' // 圆环(canvas)
    });
  });

jQuery：

/**
    * 封装jQuery插件
    */
  $.fn.circle = function (json) {
    var limit = json.limit || 100;
    var timeLimit = json.time || 30;
    var textDom = json.text || '.circle-span';
    var canvasDom = json.canvas || '.canvas-mask';

    this.each(function(){
      var text = $(this).find(textDom);
      var ctx = $(this).find(canvasDom).get(0).getContext('2d');

      var number = 0;
      var timer = null;

      /**
       * 设置文本值/设置圆环值
       */
      function setData() {
        text.html(number);

        var loaded = number * 2 / 100 * Math.PI;
        var cw = 204;
        var hcw = 102;
        ctx.clearRect(0, 0, cw, cw);
        ctx.beginPath();
        ctx.arc(hcw, hcw, hcw - 4, 0, loaded, false);
        ctx.lineWidth = 8;
        ctx.strokeStyle = '#ff6000';
        ctx.stroke();
      }

      /**
       * 定时器累加 文本值/圆环值
       */
      function getData() {
        var index = 0;
        timer = setInterval(function () {
          if(number >= 100){
            clearInterval(timer);
            console.log('setInterval:',number);
          }
          if (index <= limit) {
            setData();
            index++;
            ++number;
          } else {
            clearInterval(timer);
          }
        }, timeLimit);
      }
      getData();
    });
    return this;
  };

 

CSS样式：

    .circle {
      display: inline-block;
      background-color: #f3f0eb;
    }

    .circle > .circle-inner {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .circle .loading-circle {
      position: relative;
      width: 204px;
      height: 204px;
      margin: auto;
    }

    .circle .loading-circle > * {
      display: block;
      position: absolute;
      box-sizing: border-box;
      border-radius: 50%;
    }

    .circle .canvas-bg {
      z-index: 1;
      width: 100%;
      height: 100%;
      border: 8px solid #ddd;
    }

    .circle .canvas-mask {
      z-index: 2;
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
    }

    .circle .circle-text {
      z-index: 3;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 204px;
      font-size: 56px;
      font-weight: lighter;
      color: #999;
    }

 

转载于:https://my.oschina.net/u/3398936/blog/1563379