[Bug] This chart cannot be filled with cell width after alignTicks is set

Version

5.5.0

Link to Minimal Reproduction

option = { alignTicks: true, grid:{"containLabel":true,"left":"6%","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:{ formatter: function(params) { // YYYY-MM-DD时间正则 var regex = /^\d{4}-\d{2}-\d{2}$/; if (regex.test(params)) { var regexReplace = /-/g; var name = params.replace(regexReplace,''); return name.substring(2); } return params; } , showMinLabel: true, showMaxLabel: true, hideOverlap: true, rotate: 0.0, alignMinLabel: 'left', alignMaxLabel: 'right', textStyle:{ color:'#565960', fontSize: 12 } }, axisLine:{ width:0.5, lineStyle:{ color:"#e3e3e3" } } , data: ["2023-11-24","2023-12-01","2023-12-08","2023-12-15","2023-12-22","2023-12-29","2024-01-05","2024-01-12","2024-01-19","2024-01-26","2024-02-02","2024-02-09","2024-02-23","2024-03-01","2024-03-08","2024-03-15","2024-03-22","2024-03-29","2024-04-05","2024-04-12","2024-04-19","2024-04-26","2024-05-03","2024-05-10","2024-05-17","2024-05-24"] } , yAxis: [ { type: 'value', scale: true, name: '价格', nameTextStyle:{ }, splitLine:{ lineStyle:{color:'#e3e3e3', width:0.5} }, 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 } , { type: 'value', scale: true, name: '毛利润', nameTextStyle:{ }, splitLine:{ lineStyle:{color:'#e3e3e3', width:0.5} }, 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: 1 } ], tooltip: { confine: true, extraCssText: "maxWidth: 80%;max-height:60%;white-space: normal; word-break: break-all;overflow: auto;", trigger: "axis", enterable: true, backgroundColor: "#00000080", borderColor: "#00000000", 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 style="display: flex; align-items: center"> <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background-color:${item.color}\;"></span> <span style="flex: 1">${item.seriesName}\</span> <span style="color:rgba(255, 255, 255, 1);margin-left:20px;">${value}\</span> </div> </div> }) return dataStr} } , series: [ { name:'价格(万元/吨)', data: [3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.77], type: 'line', symbol:'none', color:'#DA4F3F', itemStyle:{ normal:{ lineStyle:{ width:1 } } }, yAxisIndex: 0 }, { name:'毛利润(万元/吨)', data: [0.37,0.36,0.36,0.23,0.26,0.26,0.26,0.46,0.48,0.48,0.51,0.51,0.51,0.53,0.53,0.53,0.58,0.51,0.47,0.51,0.51,0.5,0.49,0.49,0.43,"-"], type: 'line', symbol:'none', color:'#585C6F', yAxisIndex: 1, connectNulls: true, itemStyle:{ normal:{ lineStyle:{ width:1 } } }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(88,92,111,0.5)' }, { offset: 1, color: 'rgba(88,92,111,0)' } ]) } } ] }

Steps to Reproduce

when have 2 lineChart, i use alignTicks, this chart cannot be filled with cell width； I have tried several solutions, but they still don't work. The containLabel in that grid must be true because these charts are displayed on the mobile end and cannot be written to death

Current Behavior

I need to align the tick marks and fill the screen. Can you give me some advice

Expected Behavior

Environment

- OS: iphone
- Browser: google
- Framework: none

Any additional comments?

No response

apache / echarts