[Bug] Formating xAxis label with format function and rich causing labels not to fit

[Nurech]

Version

5.3.0

Link to Minimal Reproduction

https://jsfiddle.net/9nzam3v7/

Steps to Reproduce

1. Apply formating with rich markup on xAxis

Current Behavior

When I use the formatter with rich styling my xAxis labels for some reason get really long and it wont fit dates. Return with {monthStyle|' is causing this.

      xAxis.axisLabel.formatter = function (value, index) {
        const date = new Date(value);
        const today = date;
        const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
        const pastDaysOfYear = (today.valueOf() - firstDayOfYear.valueOf()) / 86400000;
        const answer = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
        return '{monthStyle|'+answer+'}';
      };

Expected Behavior

This works just fine.

      xAxis.axisLabel.formatter = function (value, index) {
        const date = new Date(value);
        const today = date;
        const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
        const pastDaysOfYear = (today.valueOf() - firstDayOfYear.valueOf()) / 86400000;
        const answer = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
        return answer;
      };

Environment

Angular

Any additional comments?

No response

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!