效果图：
代码：
<!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: 237px;height: 250px;}</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',radius: '100%', // 圆盘大小splitNumber: 10, // 刻度线单位center: ['50%', '50%'], // 主体位置startAngle: 216,endAngle: -36,z: 1,//y轴min: 0,max: 1,itemStyle: {color: '#2f9bff'},progress: {show: true,width: 12},axisLine: {lineStyle: {width: 12}},// 中心圆点anchor: {show: false},pointer: {show: false},// 小刻度线axisTick: {distance: 6,length: 2,lineStyle: {color: '#666',width: 1}},splitLine: {show: false // 不展示},axisLabel: {show: false // 不展示},title: {offsetCenter: [0, '85%'],fontSize: 15,color: 'rgba(37,35,58,0.4)'},detail: {fontSize: 34,offsetCenter: [0, '62%'],valueAnimation: true,formatter(value) {return `${(value * 100).toFixed(2)}%`; // 计算百分率},color: '#2F9BFF'},data: [{value: 0.7,name: '累计执行率'}]},{type: 'gauge',radius: '50%', // 圆盘大小splitNumber: 5, // 刻度线单位center: ['50%', '50%'], // 主体位置startAngle: 216,endAngle: -36,min: 0,max: 1,// itemStyle: {// color: '#ccc'// },// progress: {// show: true,// width: 12// },axisLine: {lineStyle: {width: 18,color: [[1, '#DCE4FE']]}},// 中心圆点anchor: {show: true,size: 6,showAbove: true, // 固定点是否显示在指针上面itemStyle: {borderColor: '#fff',borderWidth: 8}},pointer: {width: 2,offsetCenter: [0, '24%'],icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',length: '220%',itemStyle: {color: '#1FA4FC'}},// 小刻度线axisTick: {distance: -78,length: 13,lineStyle: {color: 'rgba(255, 255, 255, 0.6)',width: 3}},splitLine: {show: false // 不展示},axisLabel: {show: false // 不展示},title: {show: false},detail: {show: false},data: [{value: 0.7,name: '累计执行率'}]}]};option && myChart.setOption(option);</script>
</body></html>
