[Bug] When the X-axis type is time, the Echats column graph is out of range

[lx980312539]

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=area-basic&version=5.2.1&code=MYewdgzgLgBAJgQygmBeGBvAUDGIAOUAluAFyY64wJhEC2SJY5AZggDYQCmANJbjXqNwAEQCuAJ2HMYABj5VqtBsXAAVABYSuEDSHZxyARgVViUdl3IYYULgA8o5AOTOYAX1O4A5hKKHMGF0QAHdyKAkxXhhLFicYAHYAVh4YP28NeIBmACZUgCMQKCgQOnIADiSPLxiuby4wAOxFXERkcgBtGzAEOisYZwBhEDEwKDd3AF0a3CgAT3x-5whgCX12ZxmgrktgOyaB4dHx8MiuD35qy5L9YnxrS9n0-okXBHsiCE3H6g-IAAUQEQxlxXoF5osXKsQBAvqlBComKwONxUhAevdbGcri0YIUJHBQQB1fxQDTGLb4wkSYbsEBg5wAYmALO-uPyCGAAGtfCNGrT6S4JN4OQAKJLyCU8KWyAB0CQAlGyWnZHABleaWawwUB0hmMliGiZbfAIOBwYHeYyyS6eS5tBAALRApU6P2auNsCyWwIg_i4ytxAC8XXQADIgbnIzi8H6zLRFCz9IyyeRxtJcDjEPrR1HplhEdh2CQAWRAhJcYHAAZ-dtxHtxEKWEHY_okgZaIdKEajMDYMa28bWxS1MBTac9Gaz9H6_bzk4LRdBZYrAyrYADg5gGi4RAy8SMADYtxoaHBLGqiEH-jkbbi6y0Gy05gBBP4ASUaDk6smm6e0045n2KKxguhbFiuSzrpu6YhKS5Jjse6ZNi4LZth2iino0F5Xjed4tO4lx_oo9hvp8DyNt6LjZjB7J8ogEhzAA4ggmIRFEWx-pYYy5qBLTvJ8YbAv0NjgI6oIgKcUQ4i0dDAi4DolsCGEwAw9gKUgCAlu8KnAsWABuHBvGIJQqT0fQsZiWQTvxfxhgg-Q7NqDDCvJY7yNu_oAPL6aC7CsVJ5wPooAkAkCIJgjYwRhFiHExA5TmYO4FyKMFMCvn8br1shVEDIZ7BRCpuD4DCRCqDIzixOMW7mUsRxjLgRUwLVPbSC4cnmpYTW1ZZ5BSumtUAEpFEg_QAJw2biKwcP07F8VNegxXNNW9FwagOFAGpzKONi6oKAyMoMh5JAALKdxrphA-CtlAQkbtq0WBTJuKhWoRC9lFi1PWlIV2Ql7AUZOqkIK5MgpOmuDDqN5CTZ6e36kdp3nVuuDRUpYD2Y5AOxfNnpo-8mOJXN6Y_VQ8MuIdx1nSdTX-cKs4gVuICGtw8Sw79gnCdqYkSWRECfoS6kwB00xBF9OPPbZnyAnpoIPeLy3xVj1jJaTqOFg08RzlwtZETU3B-DoWWPgNq0uPV1U5ZCAwcu2W4Osbk5PpOtXGAkRjlO7yQe-Uh4nSjVD5VEjtA7gRju574dJD7fsB4oWRIaHijO0nXJcHMUJ8pbSctMAp4SFAIhcCw2q-KxGgAGqfGIHBXm1hxeWGACqJYAHKbDq-j7UyiPUxMEMEQPuDEUnXC-TxFA541oDHM45AJ3HVDODR0C9Pgc9jhHXvR-Uvv-0PVAsPSKguCWZ8wCIIgwAAEtfpB0GUsJNY2M7_Nobse9vMcnQfastGnGdJ5TwAZnWei9cB5xBoXYupcpD4ErtXWuQZ65DEbi3duqRyYHV7udFKSc_6KBom_ZMW8o7fwHgQoBodXabxyJHb2u9Y4HyDv0DoB8w4JDoV_Rh-8p6JDyOwqhwD06gLGM_OG-doEl0CGXeBVcIA11bMg8q5s0Ftw7lgnuVNcGET4bopOI9Q5j01oDHOzgZ5iPIJw8BAwV7IDoOvN2XCyE8JsUfCQJ8BhnxLBfK-t976PzhIIoh79aH0J3nvX-i8QFCNDjE8xWdxGKEgQXIu0ibCyIQQopBKDBhqIwZ3PUFMcE0zwaHShsxX6hPDs4hhkTykBxTriGh4csjhO_ovFhIdQ6tPaa4wRp0bFNKBvEix2c-E6kkWk2B5d5GKLriohuzd1GYK7gjbRpT9E5y2UDQxQNjET2GbiBJs8-q8KnsvGcq8HEb16dwvebjj5IFPufS-N874P1IE_GxISSFtPuX7KJB8YlHP_iIgYYyklkymTAmRcCsnzOUUiJZ6CNFrOKRs_u2zF6_Ldv8lx9SgY7MUHsxQGVPgC2_HILc0U1RzDoIUbGy1Lr0sZZea888txcAcaeP0EBtQWggA5SwAQ5qS0ULbXqAxrIAFImoInrtrLcCryqaG0MEAwFJ0xlW5VtHahTu6UyRjTVIBBORlUAXKKof9QBgA3HsVuYh2CcECluOm9RXXphclyO6Ik_74DWL4HQfpfJqp0HoTVMBbypnZlQaAXBMRgCdewXWJLKCEXcAAbiwFgAg5U0DwE0rKPNTBM1AA

Steps to Reproduce

When the X-axis type is time, the Echats column graph is out of range
`const data = {
option: {
animation: false,
animationDuration: 0,
animationThreshold: 1,
title: { text: '' },
grid: { show: true, left: 75, right: 32, bottom: 85 },
legend: {
data: [{ name: 'Count' }],
type: 'scroll',
selected: { 'Count': true }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross', animation: false, snap: true },
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: 'rgba(50,50,50,0.7)',
textStyle: { color: '#fff' },
padding: 10
},
dataZoom: [
{
type: 'inside',
zoomLock: false,
throttle: 100,
realtime: false,
filterMode: 'none'
},
{
type: 'slider',
zoomLock: false,
throttle: 100,
realtime: false,
filterMode: 'none',
height: 16,
handleSize: 20
},
{
yAxisIndex: [0],
realtime: false,
filterMode: 'none',
width: 16,
type: 'slider',
handleSize: 20
}
],
xAxis: {
type: 'time',
boundaryGap: true,
silent: false,
axisLine: { onZero: true },
min: 'dataMin',
max: 'dataMax',
interval: 'auto',
nameGap: 30,
axisLabel: { margin: 10, hideOverlap: true },
axisPointer: { show: true, label: {} }
},
yAxis: [
{
type: 'value',
position: 'left',
name: 'Count ',
nameLocation: 'middle',
nameGap: 50,
nameRotate: 90,
scale: true,
show: true,
nameTextStyle: { color: '#C65454' },
splitLine: { show: true },
axisTick: { show: true },
axisLabel: {
margin: 5,
rotate: 0,
color: '#C65454',
showMinLabel: true,
showMaxLabel: true
},
color: '#C65454',
large: false,
offset: 0,
axisLine: { onZeroAxisIndex: [], show: true },
axisPointer: { show: true, label: {} },
silent: false
}
],
series: [
{
name: 'Count',
type: 'bar',
data: [
{
name: 1718717518864,
value: [
1718717518864,
36,
{
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
}
],
event: {
'count': 36,
'timestamp': 1718717518864,
format: 'MMM DD HH:mm:ss',
timePre: 1718717518864
},
key: {
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
},
timePre: 1718717518864
},
{
name: 1728717518864,
value: [
1728717518864,
72,
{
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
}
],
event: {
'count': 72,
'timestamp': 1728717518864,
format: 'MMM DD HH:mm:ss',
timePre: 1728717518864
},
key: {
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
},
timePre: 1728717518864
},
{
name: 1738717518864,
value: [
1738717518864,
54,
{
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
}
],
event: {
'count': 54,
'timestamp': 1738717518864,
format: 'MMM DD HH:mm:ss',
timePre: 1738717518864
},
key: {
key: 'count',
chartDef: { graphVisualization: 'COLUMN', color: '#C65454' }
},
timePre: 1738717518864
}
],
yAxisIndex: 0,
showSymbol: true,
symbolSize: 3,
emphasis: { disabled: true },
barGap: '30%',
animation: false,
animationThreshold: 1,
itemStyle: { color: '#C65454', opacity: 0.5 },
connectNulls: true,
large: true,
markLine: {},
progressiveThreshold: 20000,
step: null
}
]
}
};

option = data.option;
`

Current Behavior

[Bug] When the X-axis type is time, the Echats column graph is out of range

Expected Behavior

When the X-axis type is time, the Echats column graph should not be out of range

Environment

- OS:windows
- Browser:Chrome 129.0.6668.90
- Framework:react16

Any additional comments?

No response

[lx980312539]

[lx980312539]

As shown in the picture above.

[Ovilia]

This is not a bug. When clipping with bar series,

Clip all the overflowed. With bar width kept.

So the part outside of the grid area will not be clipped.

[lx980312539]

@Ovilia 你好，请问我应该如何解决这个问题，我设置了clip: true,仍然存在问题

[lx980312539]

@Ovilia 如果我不想保持柱形的宽度，应该如何设置？这是强制的吗？

[lx980312539]

请看图片，这样也太奇怪了