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实现环形进度条相关推荐

Element-ui的环形进度条实现颜色渐变效果
UI效果图其实想实现环形渐变有很多种办法,比如我同事是用echarts,可是我真的很讨厌设置echarts的option要很多代码,我想用element的progress去实现,这样代码是最简洁的. ...
iOS通过CAShapeLayer和UIBezierPath画环形进度条
UIBezierPath可以绘制矢量路径,而CAShapeLayer是Layer的子类,可以在屏幕进行绘制,本文主要思想是:CAShapeLayer按照UIBezierPath的矢量路径进行绘制. 效 ...
用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆<pathd="M cx cym 0 -r a r r 0 1 0 0 ...
js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...
[Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
进度条上的小圆点怎么做_傲视网：【AE教程】如何制作环形进度条（第一讲）...
原标题:傲视网:[AE教程]如何制作环形进度条(第一讲) 大家好,福利来啦!这里将分享如何制作环形进度条,教你如何从入门到精通学AE. 环形进度条是个特殊的动画,在旋转的基础上还要选择性地显示部分区域 ...
iOS 自定义控件 progressView(环形进度条)
转帖:http://blog.csdn.net/xiangzhang321/article/details/42688133 之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是 ...
android canvas_Android 自定义View篇（七）实现环形进度条效果
前言 Android 自定义 View 是高级进阶不可或缺的内容,日常工作中,经常会遇到产品.UI 设计出花里胡哨的界面.当系统自带的控件不能满足开发需求时,就只能自己动手撸一个效果. 本文就带自定义 ...

echarts实现环形进度条

效果图

实现代码

echarts实现环形进度条相关推荐

最新文章

热门文章