echarts实现环形进度条
Posted Steven Jon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts实现环形进度条相关的知识，希望对你有一定的参考价值。
效果图
实现代码
可直接复制运行：
<!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>
以上是关于echarts实现环形进度条的主要内容，如果未能解决你的问题，请参考以下文章