Merge pull request #16985 from MeetzhDing/fix-15944
feat(gauge): axisLabel support angle rotating. close 15944
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index 07bfcc4..7ffb508 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -170,8 +170,9 @@
lineStyle?: LineStyleOption
}
- axisLabel?: LabelOption & {
+ axisLabel?: Omit<LabelOption, 'rotate'> & {
formatter?: LabelFormatter | string
+ rotate?: 'tangential' | 'radial' | number
}
pointer?: PointerOption
@@ -265,7 +266,8 @@
distance: 15,
// formatter: null,
color: '#464646',
- fontSize: 12
+ fontSize: 12,
+ rotate: 0
},
pointer: {
icon: null,
@@ -321,4 +323,4 @@
}
-export default GaugeSeriesModel;
\ No newline at end of file
+export default GaugeSeriesModel;
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index b646607..a03243e 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -31,7 +31,7 @@
import Sausage from '../../util/shape/sausage';
import {createSymbol} from '../../util/symbol';
import ZRImage from 'zrender/src/graphic/Image';
-import {extend, isFunction, isString} from 'zrender/src/core/util';
+import {extend, isFunction, isString, isNumber} from 'zrender/src/core/util';
import {setCommonECData} from '../../util/innerStore';
import { normalizeArcAngles } from 'zrender/src/core/PathProxy';
@@ -272,19 +272,55 @@
labelModel.get('formatter')
);
const autoColor = getColor(i / splitNumber);
+ const textStyleX = unitX * (r - splitLineLen - distance) + cx;
+ const textStyleY = unitY * (r - splitLineLen - distance) + cy;
- group.add(new graphic.Text({
- style: createTextStyle(labelModel, {
- text: label,
- x: unitX * (r - splitLineLen - distance) + cx,
- y: unitY * (r - splitLineLen - distance) + cy,
- verticalAlign: unitY < -0.8 ? 'top' : (unitY > 0.8 ? 'bottom' : 'middle'),
- align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
- }, {
- inheritColor: autoColor
- }),
- silent: true
- }));
+ const rotateType = labelModel.get('rotate');
+ let rotate = 0;
+ if (rotateType === 'radial') {
+ rotate = -angle + 2 * Math.PI;
+ if (rotate > Math.PI / 2) {
+ rotate += Math.PI;
+ }
+ }
+ else if (rotateType === 'tangential') {
+ rotate = -angle - Math.PI / 2;
+ }
+ else if (isNumber(rotateType)) {
+ rotate = rotateType * Math.PI / 180;
+ }
+
+ if (rotate === 0) {
+ group.add(new graphic.Text({
+ style: createTextStyle(labelModel, {
+ text: label,
+ x: textStyleX,
+ y: textStyleY,
+ verticalAlign: unitY < -0.8 ? 'top' : (unitY > 0.8 ? 'bottom' : 'middle'),
+ align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
+ }, {
+ inheritColor: autoColor
+ }),
+ silent: true
+ }));
+ }
+ else {
+ group.add(new graphic.Text({
+ style: createTextStyle(labelModel, {
+ text: label,
+ x: textStyleX,
+ y: textStyleY,
+ verticalAlign: 'middle',
+ align: 'center'
+ }, {
+ inheritColor: autoColor
+ }),
+ silent: true,
+ originX: textStyleX,
+ originY: textStyleY,
+ rotation: rotate
+ }));
+ }
}
// Axis tick
diff --git a/test/gauge-case.html b/test/gauge-case.html
index 94f8bd5..cdbf852 100644
--- a/test/gauge-case.html
+++ b/test/gauge-case.html
@@ -65,6 +65,10 @@
show: true,
width: 18
},
+ axisLabel: {
+ distance: 30,
+ rotate: 50
+ },
data: [
{
value: 0
@@ -101,6 +105,10 @@
name: 'SCORE'
}
],
+ axisLabel: {
+ distance: 30,
+ rotate: 'radial'
+ },
progress: {
show: true,
roundCap: true
diff --git a/test/gauge-simple.html b/test/gauge-simple.html
index d92a979..076e0af 100644
--- a/test/gauge-simple.html
+++ b/test/gauge-simple.html
@@ -210,6 +210,7 @@
color: '#464646',
fontSize: 20,
distance: -60,
+ rotate: 'tangential',
formatter: function(value) {
if (value === 0.875) {
return '优'
@@ -252,4 +253,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
