aAxis的lineOverflow没生效

[Elm1992]

Version

5.0.2

Steps to reproduce

step1: 打开 https://echarts.apache.org/examples/zh/editor.html?c=bar-background
step：输入option
option = {
xAxis: {
type: 'category',
axisLabel: {
width: 50,
height: 20,
overflow: 'break',
lineOverflow: 'truncate'
},
data: ['MonMonMonMonMonMon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};

What is expected?

文字应该是按高度截断的

What is actually happening?

不能正确截断

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[echarts-bot]

@xxLion It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

aAxis' lineOverflow did not take effect

BODY

Version

5.0.2

steps to reproduce

Step1: Open https://echarts.apache.org/examples/zh/Editor.html?c=bar-background
Step: Input Option
Option = {
Xaxis: {
TYPE: 'CATEGORY',
Axislabel: {
Width: 50,
HEIGHT: 20,
Overflow: 'Break',
LineOverflow: 'truncate'
}
Data: ['MonMonMonmonMon ",' Tue ',' WED ',' THU ',' Fri ',' Sat ',' Sun ']
}
Yaxis: {
TYPE: 'Value'
}
SERIES: [{
Data: [120, 200, 150, 80, 70, 110, 130],
TYPE: 'BAR',
Showbackground: True,
BackgroundStyle: {
Color: 'RGBA (180, 180, 180, 0.2)'
}
}]
}

What is expected?

Text should be highly truncated

What is actually happens?

Can't cut correctly

[lvhuiru520]

Has the problem been solved?

[lvhuiru520]

I had the same question.

[marmelo]

I am also having this issue (with version 5.3.2 and the nightly).

But seems that the lineOverflow config is not mentioned in neither the docs nor the source code.
So this seems like a new feature request instead of a bug. :)

Anyone has a workaround?

Thanks.

[marmelo]

After a couple hours debugging the code I found a workaround.

ECharts uses the ZRender library, which supports the lineOverflow config:
https://github.com/ecomfe/zrender/blob/master/src/graphic/Text.ts#L176

What is happening is that ECharts is not passing that config to ZRender.
This can be (quick and dirty) fixed by patching echarts/lib/label/labelStyle.js (v5.3.2) as follows.

diff --git a/node_modules/echarts/lib/label/labelStyle.js b/node_modules/echarts/lib/label/labelStyle.js
index a486107..6ff4e84 100644
--- a/node_modules/echarts/lib/label/labelStyle.js
+++ b/node_modules/echarts/lib/label/labelStyle.js
@@ -310,6 +310,12 @@ function setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttac
     textStyle.overflow = overflow;
   }
 
+  var lineOverflow = textStyleModel.get('lineOverflow');
+
+  if (lineOverflow) {
+    textStyle.lineOverflow = lineOverflow;
+  }
+
   var margin = textStyleModel.get('minMargin');
 
   if (margin != null) {

Sample working config (you need to set both width and height):

{
  ...
  xAxis: {
    ...
    axisLabel: {
      ...
      width: 20,
      height: 25,
      overflow: 'break',
      lineOverflow: 'truncate' // this currently requires an echarts patch
    }
  }
}

Before:

After:

You may use https://www.npmjs.com/package/patch-package to automatically patch that file when installing you project dependencies.

I will contribute to ECharts with a proper PR when I find some free time.
In the mean time, if anyone is eager to make this improvement, please go ahead!

Feel free to let me know if this works for you.