AlmostSir777 opened a new issue, #19967:
URL: https://github.com/apache/echarts/issues/19967
### 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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9z
VHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzREMjQ0ODlDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzREMjQ0OEFDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEQyNDQ4N0NENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEQyNDQ4OENENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk1OMwcAAADRSURBVHja7NYxCwFhHMfxO5mVshssXoLMFoPBYDayGHgfIgblJVgMrFZ5CRYls1BGKd+rGy4jp37q99RneYbr2z09979wOJ4FyisTiC8HOtCBDnSgAx340WrgiAvaaoF9LFFEHpNvHpZNMSx61hTdt/2cQmD0phaopX0caQSWsEZZ8ZJUsftVXBqB0bEWlD8zofp3sIWzcuAWFeyVJ8khviwb5VF3RR1z5Vn8QAcDPBP7d7VZPEITJ9zQU5nFybWK+X/QgQ50oAMd6MA/D3wJMABtgRpiehSNvwAAAABJRU5ErkJggg==','image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9i
ZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTBDQjM1MTJDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTBDQjM1MTNDRDcxMTFFRTkzOUQ4OEQ2QkJDNkNGNzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEQyNDQ4RkNENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEQyNDQ5MENENzExMUVFOTM5RDg4RDZCQkM2Q0Y3NCIvPiA8L3JkZjpEZXNjcmlwd
Glvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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 (absVa
lue >= 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 = i
tem.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
```markdown
- OS: iphone
- Browser: google
- Framework: none
```
### Any additional comments?
_No response_
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
