[Bug] x轴适配问题 #19659
Description
Version
5.4.3
Link to Minimal Reproduction
{ grid:{"containLabel":true,"left":"4%","right":"5%","top":60,"bottom":"5%"} , legend: { icon:'circle', itemHeight:7, itemWidth:7, type:'scroll', left:'center', pageIconSize:20, pageButtonItemGap:0, pageIcons: { horizontal:['image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzREMjQ0ODlDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzREMjQ0OEFDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEQyNDQ4N0NENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEQyNDQ4OENENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk1OMwcAAADRSURBVHja7NYxCwFhHMfxO5mVshssXoLMFoPBYDayGHgfIgblJVgMrFZ5CRYls1BGKd+rGy4jp37q99RneYbr2z09979wOJ4FyisTiC8HOtCBDnSgAx340WrgiAvaaoF9LFFEHpNvHpZNMSx61hTdt/2cQmD0phaopX0caQSWsEZZ8ZJUsftVXBqB0bEWlD8zofp3sIWzcuAWFeyVJ8khviwb5VF3RR1z5Vn8QAcDPBP7d7VZPEITJ9zQU5nFybWK+X/QgQ50oAMd6MA/D3wJMABtgRpiehSNvwAAAABJRU5ErkJggg==','image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTBDQjM1MTJDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTBDQjM1MTNDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEQyNDQ4RkNENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEQyNDQ5MENENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph4vkUkAAADPSURBVHja7NatCsJQHIZxp8uCYDdYvAazRdBgMBu1GPQ+/MAi2KwWo8kqXoJlIGZRwSiCj7CwZJnCi7wHfrA0Hrb9z04wms4zyiubEV8OdKADHehABzrw4+rggiOaioEzFFDCGgO1wHziOocx3ue3UPkb7GETP1nZIalhh7LyFFewR1V5mylipb4PBsqBZ7TT3CD8YdwBDUSKT3AbD0ekOMUL1HFV2AfviesnhujiofIn6eOGE1qYfPt1pB2SZcznQQc60IEOdKAD/zTwJcAA6s4a8YwhQmkAAAAASUVORK5CYII='] }, textStyle: { color: '#565960', fontSize:13 }, pageTextStyle: { color: '#565960', fontSize:11 } }, xAxis: { type: 'category', boundaryGap: false, axisTick:{ show:false }, axisLabel:{ showMaxLabel: true, rotate: 30.0, textStyle:{ color:'#565960', fontSize: 12 } }, axisLine:{ width:0.5, lineStyle:{ color:"#e3e3e3" } } , data: ["230828","230829","230830","230831","230901","230904","230905","230906","230907","230908","230911","230912","230913","230914","230915","230918","230919","230920","230921","230922","230925","230926","230927","230928","230929","231002","231003","231004","231005","231006","231009","231010","231011","231012","231013","231016","231017","231018","231019","231020","231023","231024","231025","231026","231027","231030","231031","231101","231102","231103","231106","231107","231108","231109","231110","231113","231114","231115","231116","231117","231120","231121","231122","231123","231124","231127","231128","231129","231130","231201","231204","231205","231206","231207","231208","231211","231212","231213","231214","231215","231218","231219","231220","231221","231222","231225","231226","231227","231228","231229","240101","240102","240103","240104","240105","240108","240109","240110","240111","240112","240115","240116","240117","240118","240119","240122","240123","240124","240125","240126","240129","240130","240131","240201","240202","240205","240206","240207","240208","240209","240212","240213","240214","240215","240216","240219","240220","240221","240222","240223","240226","240227","240228"] } , yAxis: { type: 'value', scale: true, name: '美元/桶', nameTextStyle:{ padding:null }, splitLine:{ lineStyle:{color:'#e3e3e3', width:0.5} }, alignTicks : true, axisLabel: { textStyle: { color:'#565960', fontSize:12 }, formatter(value) { if(isNaN(value)) { return 0; } value = Number(value); absValue = Math.abs(value); if (absValue >= 100000000) { return (value / 100000000) + "亿"; } else if (absValue >= 10000) { return (value / 10000) + "万"; } else if (absValue < 10000) { return value; } } }, yAxisIndex: 0 } , tooltip:{ trigger: "axis", confine: true, backgroundColor: "#80", borderColor: "#00000000", extraCssText: "maxWidth: 80%;max-height:60%;white-space: normal; word-break: break-all;overflow: auto;", axisPointer: { type: 'line' }, textStyle: { color: "#fff", fontSize: 12, fontFamily: "Microsoft Yahei" }, formatter: params => { let dataStr = <div><p style="font-weight:normal;color:rgba(255, 255, 255, 1);margin: 0;">${params[0].name}\</p></div> params.forEach(item => { let value = item.data; dataStr += <div> <div> <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background-color:${item.color}\;"></span> <span>${item.seriesName}\</span> <span style="float:right;color:rgba(255, 255, 255, 1);margin-left:20px;">${value}\</span> </div> </div> }) return dataStr} } , series: [ { name:'价格', data: ["80.1","81.16","81.63","83.63","85.55","-","86.69","87.54","86.87","87.51","87.29","88.84","88.52","90.16","90.77","91.48","91.2","90.28","89.63","90.03","89.68","90.39","93.68","91.71","90.79","88.82","89.23","84.22","82.31","82.79","86.38","85.97","83.49","82.91","87.69","86.66","86.66","88.32","89.37","88.75","85.49","83.74","85.39","83.21","85.54","82.31","81.02","80.44","82.46","80.51","80.82","77.37","75.33","75.74","77.17","78.26","78.26","76.66","72.9","75.89","77.6","77.77","77.1","-","75.54","74.86","76.41","77.86","75.96","74.07","73.04","72.32","69.38","69.34","71.23","71.32","68.61","69.47","71.58","71.43","72.47","73.44","74.22","73.89","73.56","-","75.57","74.11","71.77","71.65","-","70.38","72.7","72.19","73.81","70.77","72.24","71.37","72.02","72.68","-","72.4","72.56","74.08","73.41","75.19","74.37","75.09","77.36","78.01","76.78","77.82","75.85","73.82","72.28","72.78","73.31","73.86","76.22","76.84","76.92","77.87","76.64","78.03","79.19","-","78.18","77.91","78.61","76.49","77.58","78.87","78.54"], type: 'line', symbol:'none', color:'#DA4F3F', connectNulls: true, itemStyle:{ normal:{ lineStyle:{ width:1 } } } } ] }
Steps to Reproduce
这个问题困扰我好就，不设置grid左右留白又太多，设置了又会超过容器宽度被裁剪
Current Behavior
这个问题困扰我好就，不设置grid左右留白又太多，设置了又会超过容器宽度被裁剪
Expected Behavior
就想设置grid以后点击legend不会被裁剪
Environment
- OS:移动端手机 iOS/android
- Browser: none
- Framework: flutter webView加载Any additional comments?
No response