文章目录
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或倒计时效果】1
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; }
}
https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/ ↩︎