feat: 仪表盘进度条重构

components/DashboardProgress/DashboardProgress.vue

@@ -43,72 +43,70 @@
 							devicePixelRatio: canvasDpr
 						})
 						canvas.setChart(chart)
+						const { endVal } = this.elementData.dataList
+						const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
 						const guageChart = [{
 							name: "",
-							value: this.elementData.dataList.endVal
+							value: endVal
 						}]
 						const color = [
-							[this.elementData.dataList.endVal / 100, this.elementInfo.option.progress
-								.strokeColor
-							],
-							[1, this.elementInfo.option.progress.trailColor]
+							[endVal / 100, strokeColor],
+							[1, trailColor]
 						]
-						const strokeWidth = this.$u.common.pxToRpx(this.elementInfo.option.progress.strokeWidth)
-                        var startAngle = 180
-                        var endAngle = 0
-                        switch (this.elementInfo.option.progress.gapPosition) {
-                            case 'bottom':
-                                if (this.elementInfo.option.progress.gapDegree > 180) {
-                                    startAngle = 90 + (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                    endAngle = 90 - (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                } else {
-                                    startAngle = 270 - this.elementInfo.option.progress.gapDegree / 2
-                                    endAngle = 0 - (90 - this.elementInfo.option.progress.gapDegree / 2)
-                                }
-                                break;
-                            case 'top':
-                                if (this.elementInfo.option.progress.gapDegree > 180)  {
-                                    startAngle = 270 + (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                    endAngle = 270 - (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                } else {
-                                    startAngle = 360 + (90 - this.elementInfo.option.progress.gapDegree / 2)
-                                    endAngle = 90 + (this.elementInfo.option.progress.gapDegree / 2)
-                                }
-                             break;
-                            case 'left':
-                                if (this.elementInfo.option.progress.gapDegree > 180) {
-                                    startAngle = 0 + (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                    endAngle = 0 - (360 - this.elementInfo.option.progress.gapDegree) / 2
-                                } else {
-                                    startAngle = 180 - this.elementInfo.option.progress.gapDegree / 2
-                                    endAngle = -180 + this.elementInfo.option.progress.gapDegree / 2   
-                                }
-                             break;
-                            default:
-                                startAngle = 360 - this.elementInfo.option.progress.gapDegree / 2
-                                endAngle = 0 + this.elementInfo.option.progress.gapDegree / 2
-                             break;
-                        }
+						var startAngle = 180
+						var endAngle = 0
+						switch (gapPosition) {
+							case 'bottom':
+								if (gapDegree > 180) {
+									startAngle = 45 + (360 - gapDegree) / 2
+									endAngle = 135 - (360 - gapDegree) / 2
+								} else {
+									startAngle = 225 - gapDegree / 2
+									endAngle = 45 - (90 - gapDegree / 2)
+								}
+								break;
+							case 'top':
+								if (gapDegree > 180)  {
+									startAngle = 225 + (360 - gapDegree) / 2
+									endAngle = 315 - (360 - gapDegree) / 2
+								} else {
+									startAngle = 315 + (90 - gapDegree / 2)
+									endAngle = 135 + (gapDegree / 2)
+								}
+								break;
+							case 'left':
+								if (gapDegree > 180) {
+									startAngle = -45 + (360 - gapDegree) / 2
+									endAngle = 45 - (360 - gapDegree) / 2
+								} else {
+									startAngle = 135 - gapDegree / 2
+									endAngle = -135 + gapDegree / 2   
+								}
+								break;
+							default:
+								startAngle = 315 - gapDegree / 2
+								endAngle = 45 + gapDegree / 2
+								break;
+						}
+						const axisLineWidth = strokeWidth / 100 * pCanvasWidth
 						const options = {
 							...this.elementInfo.option,
 							tooltip: {
 								formatter: '{a} <br/>{b} : {c}%'
 							},
 							title: [{
-								text: this.elementData.dataList.endVal + '%',
+								text: endVal + '%',
 								x: 'center',
-								top: '45%',
+								top: 'middle',
 								textStyle: {
-									fontSize: 30,
-									color: this.elementInfo.option.progress.titleColor,
+									fontSize: Math.max(14 * pCanvasWidth / 132, 14),
+									color: titleColor,
 								},
 							}],
 							series: [{
 								type: 'gauge',
-								// center: ['50%', '50%'],
-								radius: '50%',
-								startAngle: startAngle,
-								endAngle: endAngle,
+								startAngle: startAngle + 25,
+								endAngle: endAngle - 25,
 								pointer: {
 									show: false,
 								},
@@ -116,12 +114,12 @@
 									show: true,
 									lineStyle: {
 										color: color,
-										width: strokeWidth,
+										width: axisLineWidth,
 										shadowOffsetX: 0,
 										shadowOffsetY: 0,
 										opacity: 1,
 									},
-                                    roundCap: this.elementInfo.option.progress.strokeLinecap == 'round' ? true : false 
+									roundCap: strokeLinecap == 'round' ? true : false 
 								},
 								splitLine: {
 									show: false
@@ -132,8 +130,7 @@
 								axisTick: {
 									show: false
 								},
-
-								radius: '90%',
+								radius: pCanvasWidth / 2 - strokeWidth * 2,
 							}]
 						}
 						chart.setOption(options)