option = { backgroundColor: '#0A1934', title: [{ text: '95%', textStyle: { color: '#22ac38', fontSize: 35 }, itemGap: 20, left: '20%', top: '40%' },{ text: '总体完成度', textStyle: { color: '#fff', fontSize: 24, fontWeight:'normal' }, itemGap: 20, left: '17%', top: '50%' }], grid: [{ top: '10%', width: '50%', left: '45%', containLabel: true }], angleAxis: { polarIndex: 0, min: 0, max: 100, show: false, boundaryGap: ['40%', '40%'], startAngle: 90, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false }, }, polar: [{ center: ['25%', '50%'], //中心点位置 radius: '80%' //图形大小 }], tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(params) { return params[0].name + '<br/>' + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" + params[0].seriesName + ' : ' + params[0].value + '%<br/>' } }, xAxis: { show: false, type: 'value' }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: false, textStyle: { color: '#fff' }, }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: ['标书完成率', '研发完成率', '实施部署完成率', '合同完成率'] }, { type: 'category', inverse: true, axisTick: 'none', axisLine: 'none', show: true, axisLabel: { textStyle: { color: '#fff', fontSize: '12' }, formatter: function(value) { return value + "%"; }, }, data: [88, 70, 25, 68] }], series: [{ name: '完成率', type: 'bar', zlevel: 1, silent:false, label: { normal: { color: '#fff', show: true, position: [0, '-24px'], textStyle: { fontSize: 16 }, formatter: function(a, b) { return a.name } } }, itemStyle: { normal: { barBorderRadius: 30, color: '#14d88e', }, }, barWidth: 20, data: [50.5, 50, 50, 50], }, { name: '背景', type: 'bar', barWidth: 20, barGap: '-100%', data: [100, 100, 100, 100], itemStyle: { normal: { color: '#f3f3f7', barBorderRadius: 30, } }, }, { type: 'bar', z: 10, name: "完成度", data: [50], showBackground: false, backgroundStyle: { borderWidth: 10, width: 10 }, coordinateSystem: 'polar', roundCap: true, barWidth: 35, //大的占比环 itemStyle: { normal: { opacity: 1, color: "#14d88e" } }, }, { type: 'pie', name: '内层细圆环', radius: ['46%', '34%'], center: ['25%', '50%'], //中心点位置 startAngle: 90, hoverAnimation: false, clockWise: true, silent: true, itemStyle: { normal: { color: '#f3f3f7', shadowBlur: 0, shadowColor: '#66666a', } }, tooltip: { show: false, }, label: { show: false }, data: [100] } ] };