You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/08/09 03:45:55 UTC
[GitHub] [echarts] Ovilia commented on a diff in pull request #16985: feat(gauge): axisLabel support angle rotating. close 15944
Ovilia commented on code in PR #16985:
URL: https://github.com/apache/echarts/pull/16985#discussion_r940865016
##########
src/chart/gauge/GaugeView.ts:
##########
@@ -272,19 +272,55 @@ class GaugeView extends ChartView {
labelModel.get('formatter')
);
const autoColor = getColor(i / splitNumber);
+ const textStyleX = unitX * (r - splitLineLen - distance) + cx;
+ const textStyleY = unitY * (r - splitLineLen - distance) + cy;
+
+ 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;
+ }
- 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
- }));
+ 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'
Review Comment:
I think you did an excellent job! This feature is really helpful!
Current implementation looks great. I only have a little doubt about text alignment. It doesn't look very obvious but if you look carefully, you should find that it may not be sufficient to use `verticalAlign: 'middle', align: 'center'`.
<img width="404" alt="image" src="https://user-images.githubusercontent.com/779050/183558234-011403ea-fa53-4131-a269-a851b56dd7d3.png">
As you can see from this example, the text is aligned to center but in most situations, we may wish to align them to the inner side (which means align to right for text on the left side, and left on the right) or to the outter side vice versa.
But I think we can make this a new feature in another PR by providing new options as `align` and `verticalAlign` if you are interested or when some developers ask for such a feature. So I will approve this PR for now.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org