关键词：
效果图
实现代码
可直接复制运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>环形进度条</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style type="text/css">
.center
position: absolute;
width: 50%;
height: 80%;
box-shadow: 1px 2px 10px 0 rgba(0, 196, 196, 0.5);
border-radius: 10px;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
</style>
</head>
<body>
<div id = "content" class = "center"></div>
<script type="text/javascript">
var value = 1458;//当前进度
var maxValue = 6000;//进度条最大值
var pipe = echarts.init(document.getElementById('content'));
var option =
title:
//标题内容
text: '张飞-高级开发练习完成进度：',
textStyle:
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
fontSize: 24
,
//标题位置
top: '5%',
left: '5%'
,
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
type: 'text',
left: 'center',
top: '48%',
style:
//value当前进度
text: '已完成' + value + '道',
textAlign: 'center',
fill: '#000',
fontSize: 28
,
//第二行文字
//内容 + 位置
type: 'text',
left: 'center',
top: '55%',
style:
//maxValue进度条最大值
text: '共' + maxValue + '道',
textAlign: 'center',
fill: '#999',
fontSize: 24
],
series: [
type: 'pie',
radius: ['70%', '64%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine:
normal:
show: false
,
//增加阴影效果
itemStyle:
normal:
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
,
data: [
//value当前进度 + 颜色
value: value,
itemStyle:
normal:
color: '#73DEB3'
,
//(maxValue进度条最大值 - value当前进度) + 颜色
value: maxValue - value,
itemStyle:
normal:
color: '#73A0FA'
]
]
;
pipe.setOption(option);
//随着浏览器窗口大小改变而改变
window.addEventListener("resize", function()
pipe.resize();
);
</script>
</body>
</html>
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
用初中数学知识撸一个canvas环形进度条(代码片段)
...环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：我的第一反应还是找现成的组件，市面上很多组件... 查看详情
csssvg环形进度条-5(代码片段)
htmlsvg环形进度条-7(代码片段)
csssvg环形进度条-3。(代码片段)
htmlsvg环形进度条-4(代码片段)
htmlsvg环形进度条-2(代码片段)
htmlsvg环形进度条-1(代码片段)
自定义圆环形进度条实现(代码片段)
最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情
delphi:圆形进度(环形进度)(代码片段)
...回DC5项目，资源下载美工提供圆形进度条，复习Delphi，为实现其颇觉有趣，遂研究其。最终效果图如下： 实现：制作TCircleProgress控件，实现方法参照系统之TGauge控件，CSDN上tp机器猫一个源码，结合GDI+绘制技术实现。设计控... 查看详情
环形进度条组件(代码片段)
<template><divclass="content"ref="box"><svg:id="idStr"style="transform:rotate(-90deg)":width="width":height="width 查看详情
angular中对echarts图表进行封装（环形进度条、双y轴折线区域图）
参考技术A在大屏的开发过程中，需要大量的使用echarts图表，我们可以腾出时间将echarts图表进行二次封装，以便后期循环使用。封装为公共组件，在使用的时候只需要传入option项即可这个文件将你所有图表的配置项写成key-value的... 查看详情
qt编写自定义控件14-环形进度条(代码片段)
前言环形进度条，用来展示当前进度，为了满足大屏UI的需要特意定制，以前有个叫圆环进度条，不能满足项目需要，只能重新定做，以前的进度间距不能自适应分辨率，而且当前进度对应的反的进度不能单独设置颜色，即当前... 查看详情
实现环形进度条的几种方法(代码片段)
环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。DIV+CSS3这个是最基本的实现方式... 查看详情
使用canvas实现环形进度条
html代码：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8"/>5<title></title>6</head>7<body>8<canvasid="pro"width="400"height="300"></canvas>9 查看详情
h5canvas实现圆形时间倒计时进度条(代码片段)
...到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间文字能够有颜色渐变效果... 查看详情
h5canvas实现圆形时间倒计时进度条(代码片段)
...到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间文字能够有颜色渐变效果... 查看详情
echarts进度条(代码片段)
varcolors=["#f00","#00f","#ff0","#0ff","#f0f"];option=title:text:‘世界人口总量‘,subtext:‘数据来自网络‘,tooltip:trigger:‘axis‘,axisPointer:type:‘shadow‘,grid:left:‘3%‘,right:‘4%‘,bottom:‘3%‘,co 查看详情