echart图表之圆盘 pie 单盘 带有刻度的圆盘满盘

效果展示：

代码：

//首页整圆有刻度
export const piePulpAngle = (params) => {
	let val = params ? params.value : 130
	let titleText = params ? params.title : '标题'
	let option = {
		backgroundColor: '#fff',
		color: '#fff',
		tooltip: {
			show: false
		},
		grid: {
			left: '0%',
			right: '0%',
			bottom: '10%',
			top: '0%',
			containLabel: true,
			borderWidth: '0'
		},
		title: {
			// text: "桨角",
			text: titleText,
			x: 'center',
			y: '30%',
			textStyle: {
				fontSize: '28rpx',
				color: '#000'
			}
		},
		series: [
			{
				name: "最外部进度条",
				type: "gauge",
				radius: '100%',
				// radius: ['90%', '100%'],
				startAngle: '90',
				endAngle: '-269.999',
				splitNumber: 12,
				axisLine: {
					lineStyle: {
						color: [
							[val / 360, new _echarts.graphic.LinearGradient(
								0, 1, 0, 0, [{
									offset: 1,
									color: 'rgba(67, 122, 203, 1)',
								}, {
									offset: 0.5,
									color: 'rgba(67, 122, 203, 1)',
								},
								{
									offset: 0,
									color: 'rgba(67, 122, 203, 1)',
								}
							]
							)],
							[
								1, 'RGBA(218, 226, 238, 1)'
							]
						],
						width: 7,
					},
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				itemStyle: {
					show: false,
				},
				detail: {
					show: false
				},
				title: {
					show: false,
				},
				data: [{
					value: val,
				}],
				pointer: {
					show: false,
				},
				animationDuration: 4000,
			},
			{
				name: '刻度',
				type: 'gauge',
				radius: '86%',
				startAngle: "90",
				endAngle: "-269.999",
				splitNumber: 8,
				z: 8,
				min: 0,
				max: 360,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[1, 'RGBA(176, 199, 233, 1)']
						],
						// shadowColor: 'pink',
						// shadowBlur: 15
					}
				},
				pointer: {
					show: false,
				},
				axisTick: {
					show: true,
					splitNumber: 5,
					length: 4,
					distance: 2,

					lineStyle: {
						color: 'RGBA(204, 204, 204, 1)',
						width: 1,
					}
				},
				axisLabel: {
					distance: -2,
					formatter: function (v) {
						v = v.toFixed();
						switch (v + '') {
							// case '-45':
							//     return '315';
							// case '-90':
							//     return '270';
							// case '-135':
							//     return '225';
							// case '-180':
							//     return '180';
							// case '-225':
							//     return '135';
							// case '-270':
							//     return '90';
							// case '-315':
							//     return '45';
							// case '-360':
							//     return '0';
							case '0':
								return '0';
							case '45':
								return '45';
							case '90':
								return '90';
							case '135':
								return '135';
							case '180':
								return '180';
							case '225':
								return '-135';
							case '270':
								return '-90';
							case '315':
								return '-45';
							case '360':
								return '0';
						}
					},
					textStyle: {
						color: '#000',
						fontSize: 10,
					}
				},
				splitLine: {
					show: true,
					length: 12,
					distance: 2,
					lineStyle: {
						color: 'RGBA(204, 204, 204, 1)',
						width: 1,
					}
				},
				detail: {
					show: false,
					textStyle: {
						fontSize: "14",
						color: 'pink'
					}
				},
				title: {
					show: true,
				},
				data: [{
					value: val
				}]
			},
			{
				name: '指针',
				type: "gauge",
				radius: "84%",
				startAngle: "90",
				endAngle: "-269.999",
				min: 0,
				max: 360,
				splitNumber: 12,
				pointer: {
					show: true,
					width: 6,
					length: '100%',
				},
				itemStyle: {
					color: 'RGBA(68, 122, 203, 1)',
					// borderColor: 'RGBA(157, 186, 228, 1)',
					// shadowColor: 'RGBA(222, 231, 246, 1)',
					// shadowBlur: 10,
					// shadowOffsetX: 2,
					// shadowOffsetY: 2
				},
				detail: {
					show: true,
					offsetCenter: [0, '30%'],
					textStyle: {
						fontSize: 18,
						color: 'RGBA(0, 203, 224, 1)',
					},
					formatter: function (params) {
						return `${params}°`
					},
					rich: {
						name: {
							fontSize: 14,
							lineHeight: 30,
							color: '#000',
							fontWeight: '300',
						},
					},
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: [
							[1, "RGBA(68, 122, 203, 1)"]
						],
						width: 20,
						opacity: 1,
					},
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				data: [{
					value: val,
				}],
				markPoint: {
					data: [{
						x: "50%",
						y: "50%",
						symbol: 'circle',
						symbolSize: 16,
						itemStyle: {
							color: 'RGBA(102, 147, 212, 1)'
						},
					}, {
						x: "50%",
						y: "50%",
						symbol: 'circle',
						symbolSize: 12,
						itemStyle: {
							color: "#fff"
						},
					}]
				},
			},
		]
	}
	return option
}

?传参参考：

let rud1={ 
				 title: '左桨角',
				 name: 'r/min', 
				 value: 48, 
				 unit: '', 
				 pos: ['25%', '50%'], 
				 rangeMax: 360 
				}