[GitHub] [echarts] lvhuiru520 commented on issue #14506: aAxis的lineOverflow没生效

[GitBox <gi...@apache.org>]

lvhuiru520 commented on issue #14506:
URL: https://github.com/apache/echarts/issues/14506#issuecomment-1180107977

   Thanks bro, a few months ago, I used a foolish method to fix this problem. I don't have any good idea now. Thank you for sharing. 
   
   
   formatter: function(oid) {
           const value = source.find(item => item.visitOid === oid).visitName;
           let str = '';
           const zhChar = /[\u4e00-\u9fa5]/;
           const digitChar = /^\d$/;
           const achar = /^[a-z]$/i;
           const Achar = /^[A-Z]$/;
           let sum = 0;
           let len = 0;
           let i = 0;
           if (value) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (; i < value.length; i++) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (zhChar.test(value[i]) || Achar.test(value[i])) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sum += 12;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (digitChar.test(value[i]) || achar.test(value[i])) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sum += 8;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sum += 12;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sum &gt; getXLabelWidth(myChart, source)) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sum = 0;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; len += 1;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i--;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (len &gt; 3) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const strLength = i;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (value.length &gt; strLength) {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; str = value.substr(0, strLength) + '...';
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; str = value;
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; }
   &nbsp; &nbsp; &nbsp; &nbsp; return str;
   
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   ------------------&nbsp;原始邮件&nbsp;------------------
   发件人:                                                                                                                        "apache/echarts"                                                                                    ***@***.***&gt;;
   发送时间:&nbsp;2022年6月17日(星期五) 凌晨1:49
   ***@***.***&gt;;
   ***@***.******@***.***&gt;;
   主题:&nbsp;Re: [apache/echarts] aAxis的lineOverflow没生效 (#14506)
   
   
   
   
   
    
   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 try to make 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.
    
   —
   Reply to this email directly, view it on GitHub, or unsubscribe.
   You are receiving this because you commented.Message ID: ***@***.***&gt;


-- 
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