效果图：
代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图表</title><style>#main {width: 241.82px;height: 188px;}</style>
</head><body><div id="app"><div id="main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><script>var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {series: [{type: 'gauge',startAngle: 180,endAngle: 0,center: ['50%', '60%'], // 主体位置radius: '100%', // 圆盘大小min: 0,max: 1,splitNumber: 8, // 刻度线单位itemStyle: {color: '#000'},// 表盘主体axisLine: {lineStyle: {width: 14,color: [[0.5, '#58D9F9'],[0.75, '#7CFFB2'],[1, '#FDDD60']]}},// 指针pointer: {icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',length: '60%',width: 10,offsetCenter: ['-15%', '0%'],itemStyle: {color: '#ccc'}},// 小刻度线axisTick: {distance: -30, // 位置length: 4,lineStyle: {color: '#ccc',width: 2}},// 大刻度分界线splitLine: {show: false // 不展示},// 刻度线文字axisLabel: {color: '#ccc',fontSize: 16,distance: -20,formatter: function (value) {if (value === 1) {return '100';} else if (value === 0) {return '0';}return '';}},title: {offsetCenter: [0, '65%'],fontSize: 14},detail: {fontSize: 30,offsetCenter: [0, '35%'],valueAnimation: true,formatter: function (value) {return `${value * 100}%`; // 计算百分率},color: 'inherit'},data: [{value: 0.765,name: '累计执行率'}]},{type: 'gauge',startAngle: 180,endAngle: 0,center: ['50%', '60%'], // 主体位置radius: '120%', // 圆盘大小min: 0,max: 1,splitNumber: 8, // 刻度线单位axisLine: {lineStyle: {color: [[1, '#ccc']],width: 2}},splitLine: {show: false},axisTick: {show: false},axisLabel: {show: false},pointer: {show: false},title: {show: false},anchor: {show: false}},{type: 'gauge',startAngle: 180,endAngle: 0,center: ['50%', '60%'], // 主体位置radius: '65%', // 圆盘大小min: 0,max: 1,splitNumber: 8, // 刻度线单位axisLine: {lineStyle: {color: [[1, '#ccc']],width: 0.6}},splitLine: {show: false},axisTick: {show: false},axisLabel: {show: false},pointer: {show: false},title: {show: false},anchor: {show: false}}]};option && myChart.setOption(option);</script>
</body></html>
![[2016-2018]phpstudy的exp制作](https://img-blog.csdnimg.cn/0123eab1c02d4467981d827b0ebd3658.png)
