用echarts画圆环图,显示进度条效果

要实现类似于下图的效果,开始用的css画出来的,感觉很复杂,换了echart省很多代码


直接上代码:

 var e=80; 
 var Chart4 = echarts.init(document.getElementById('chart4'));
	option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '15',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:''},
		                {value:100-e, name:''}
		            ]
		        }
		    
		};
        Chart4.setOption(option);        

显示效果:


评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值