1. 程式人生 > >用echarts畫圓環圖,顯示進度條效果

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

顯示效果: