使用canvas、echarts、svg等多用方式绘制一个圆环占比情况

1. 使用 HTML5 提供的 canvas API 绘制一个简单的圆环

演示效果

1.1 具体实现代码

var canvas = document.getElementById('canvas')
var timer = null
changeCircle(canvas, 0)
function changeCircle(el, num) {
    var init_num = 0
    var ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, 100, 100);
    ctx.lineWidth = 10
    ctx.strokeStyle = '#eee';
    ctx.beginPath()
    ctx.arc(50, 50, 45, 0, Math.PI * 2)
    ctx.stroke()
    clearInterval(timer)
    timer = setInterval(function() {
        ctx.clearRect(0, 0, 100, 100);
        ctx.lineWidth = 10
        ctx.strokeStyle = '#52ccba';
        ctx.beginPath()
        ctx.arc(50, 50, 45, 0, Math.PI * 2)
        ctx.stroke()
        ctx.beginPath();
        var gradient = ctx.createLinearGradient(0, 0, 170, 0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("1.0","red");
        ctx.strokeStyle = gradient;
        ctx.arc(50, 50, 45, 0, Math.PI * 2 * init_num / 100)
        ctx.stroke();
        ctx.font = '20px Arial'
        ctx.fillStyle = 'red'
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.fillText(init_num + '%',50,50)
        init_num++
        if (init_num > num) {
            clearInterval(timer)
        }
        console.log(init_num)
    }, 10)
}

2. 使用 echarts 的特性 绘制一个 圆环

演示效果

2.1 具体Echarts配置情况

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}:{c} \n\n {a}: {d}%'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

3. 使用 svg 自有的属性和样式实现一个圆环的进度条效果

效果演示

参考：张鑫旭：【寥寥数行SVG实现圆环loading或倒计时效果】¹

3.1 具体的实现方式

圆环HTML结构配置

<div class="svg-box">
    <svg width="100%" height="100%">
      <linearGradient id="svg-gradient" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="0" y2="0">
        <stop offset="0%" style="stop-color:yellow"/>
        <stop offset="100%" style="stop-color:green"/>
      </linearGradient>
      <circle cx="50%" cy="50%" r="240" stroke-width="20" stroke="#F2F2F2" fill="none"></circle>
      <circle id="ring" cx="50%" cy="50%" r="240" stroke-width="20" fill="none" stroke="url(#svg-gradient)" transform="rotate(-90 250 250)" stroke-dasharray="1000, 1507"
      ></circle>
    </svg>
    <p class="ring-num">进度条</p>
  </div>

参数说明：

• stroke-dasharray：此属性参数第一个数值表示 dash，这里代表覆盖范围，后一个数字表示 gap 长度默认为circle的周长314。周长 = 2 * Math.PI * r
• tranform：作用是将圆环从0点位置开始覆盖，不写此属性则从3点位置开始覆盖（rotate 第一个参数为角度，第二个和第三个参数为旋转中心，这里为容器的中心）。

圆环样式设置

.svg-box {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 15vh;
  position: relative;
}
.ring-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 82px;
}
#ring {
  stroke-dasharray: 1508 1507;
  animation: ring-process 2000ms ease-in-out;
}
@keyframes ring-process {
  0% { stroke-dasharray: 0 1507; }
  100% { stroke-dasharray: 1507 1507; }
}

---

1. https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/ ↩︎