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

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

用echarts画圆环图,显示进度条效果_第1张图片

直接上代码:

 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);        

显示效果:

用echarts画圆环图,显示进度条效果_第2张图片

你可能感兴趣的:(Html)