EChart案例-半圆轮盘百分比图

本文主要是介绍EChart案例-半圆轮盘百分比图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看效果图：

参数配置option:

option = {title: {text: '98%',textStyle: {color: '#f97060',fontSize: 24},subtext: '通讯合格率',subtextStyle: {color: '#84b4be',fontSize: 16},x: 'center',y: '230'},tooltip: {formatter: "{a} <br/>{b} : {c}%"},series: [{type: 'gauge',center: ['50%', '50%'],radius: '38%',startAngle: 180,endAngle: 0,axisLine: {show: true,lineStyle: {width: 1,color: [[1, '#84b4be']]}},axisLabel: {show: false,},axisTick: {show: 0,},splitLine: {show: 0,},pointer: {show: 0,},detail: {show: 0},},  //里面的细圆圈{min: 0,max: 100,startAngle: 180,endAngle: 0,name: '通讯合格率',type: 'gauge',detail: {show: false},axisLine: {lineStyle: {width: 100,color: [[98/100,'#328ad1'],[1, '#08368b']]}},pointer: {show: false,},itemStyle: {color: '#bbb'},axisTick: {show: false},splitLine: {show: false},splitNumber: 1,axisLabel: {formatter: function(value, index) {return "\n\n" + value},show: true,textStyle: {color: '#84b4be',fontSize: '20',}},data: [{value: 98}]}  //外面的大圆圈和0，100两个刻度]
};

 最大值：100，最小值：0，当前值：98 

其余的参数（标题位置，颜色）可以根据自己项目需求调整，总之原理就是2个轮盘图拼的。

这篇关于EChart案例-半圆轮盘百分比图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---