效果图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/echarts.js"></script><title>圆环进度条</title></head><body><div id="pie" style="width: 1366px;height:450px;"></body><script type="text/javascript">//柱状图var asd =document.getElementById('pie');var pieChart = echarts.init(asd);var labelTop = {//上层样式normal : {color :'#0099cc',label : {show : true,position : 'center',formatter : '{b}',textStyle: {baseline : 'bottom',fontSize:26}},labelLine : {show : false}}};var labelFromatter = {//环内样式normal : {//默认样式label : {//标签formatter : function (a,b,c){return 100 - c + '%'},// labelLine.length：30, //线长，从外边缘起计算，可为负值textStyle: {//标签文本样式color:'black',align :'center',baseline : 'top'//垂直对其方式}}},};var labelBottom = {//底层样式normal : {color: '#99ccff',label : {show : true,position : 'center',fontSize:22},labelLine : {show : false}},emphasis: {//悬浮式样式color: 'rgba( 0,0,0,0)'}};var radius = [80,122];// 半径[内半径，外半径]var pieChartOption = {title : {text: 'echarts实现圆环进度条',subtext: '易唐云网智能科技',x:'center',//正标题样式textStyle: {fontSize:44,fontFamily:'Arial',fontWeight:100,//color:'#1a4eb0',},//副标题样式subtextStyle: {fontSize:28,fontFamily:'Arial',color:"#1a4eb0",},},animation:false,tooltip : { // 提示框. Can be overwrited by series or datatrigger: 'axis',//show: true, //default trueshowDelay: 0,hideDelay: 50,transitionDuration:0,borderRadius : 8,borderWidth: 2,padding: 10, // [5, 10, 15, 20]},series : [{type : 'pie',center : ['50%', '70%'],//圆心坐标（div中的%比例）radius : radius,//半径x: '0%', // for funnelitemStyle : labelTop,//graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏data : [{name:'达成率', value:79,itemStyle : labelTop},{name:'79%', value:21, itemStyle : labelBottom}]}]};pieChart.setOption(pieChartOption);</script></html>
