Skip to content

E
ec-report-refactor
Commit 0027e935 authored by peco's avatar peco
Browse files
Options

feat：仪表盘缺口方向和角度计算

parent 812ae707
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 3 deletions
components/DashboardProgress/DashboardProgress.vue
View file @ 0027e935
...@@ -52,6 +52,41 @@ ...@@ -52,6 +52,41 @@
[1, this.elementInfo.option.progress.trailColor] [1, this.elementInfo.option.progress.trailColor]
] ]
const strokeWidth = this.elementInfo.option.progress.strokeWidth const strokeWidth = 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;
}
const options = { const options = {
...this.elementInfo.option, ...this.elementInfo.option,
tooltip: { tooltip: {
...@@ -63,15 +98,15 @@ ...@@ -63,15 +98,15 @@
top: '45%', top: '45%',
textStyle: { textStyle: {
fontSize: 30, fontSize: 30,
color: '#000000', color: '#ffffff',
}, },
}], }],
series: [{ series: [{
type: 'gauge', type: 'gauge',
// center: ['50%', '50%'], // center: ['50%', '50%'],
radius: '50%', radius: '50%',
startAngle: '180', startAngle: startAngle,
endAngle: '0', endAngle: endAngle,
pointer: { pointer: {
show: false, show: false,
}, },
...@@ -84,6 +119,7 @@ ...@@ -84,6 +119,7 @@
shadowOffsetY: 0, shadowOffsetY: 0,
opacity: 1, opacity: 1,
}, },
roundCap: this.elementInfo.option.progress.strokeLinecap == 'round' ? true : false
}, },
splitLine: { splitLine: {
show: false show: false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment