Echarts环形进度条

最终效果图如下：

注意和基础折线图不同，进度条需要额外定义2个变量：

var value = 66;//当前进度
var maxvalue = 100;//进度条最大值

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--title表示网页名称--><title>右上-圆环图</title><!--引入ECharts.min.js文件--><script src="echarts.min.js"></script></head><body><!--为Echarts准备一个定义了宽和高的DOM容器--><div id="main"style="width: 600px;height: 400px;"></div><script type="text/javascript">//基于准备好的DOM,初始化echart实例var myChart = echarts.init(document.getElementById('main'));//以后2个var是专门为了进度条写的var value = 66;//当前进度var maxvalue = 100;//进度条最大值//指定图标的配置项和数据var option = {title: {text:'右上-环形图'},//饼图中间显示文字graphic: {type: 'text',left: 'center',top: 'center',style: {text: "66%",//文字内容fill: "#fff",//文字颜色fontSize: 50 //文字字号}},series: [{//第一张圆环type: 'pie',radius: ['60%','70%'],center: ['50%','50%'],// 隐藏指示线labelLine: { show: false },data: [//value当前进度 + 颜色{value: value,itemStyle: {normal: {color: '#00ff00'}}},{value: maxvalue - value,itemStyle:{normal:{color: '#00aaff'}}}]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script></body>
</html>

其余设置和基础折线图一样，因此这里没有放完整代码。

如有需要，可以留言。

Echarts环形进度条相关推荐

echarts实现环形进度条
效果图实现代码可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
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 之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是 ...

Echarts环形进度条

Echarts环形进度条相关推荐

最新文章

热门文章