Метки оси X ECharts, усеченные сеткой влево/вправо 0: Как сместить первую/последнюю метку, не влияя на интервал? ⇐ Javascript

[Anonymous]

Проблема Я использую ECharts, и мне нужно, чтобы диаграмма занимала всю ширину контейнера. Поэтому я установил для Grid.left иgrid.right значение 0. Однако это приводит к усечению (обрезанию) первой и последней меток по оси X, поскольку они переполняют контейнер.
Что я пробовал Я пытался решить эту проблему, используя xAxis.axisLabel.formatter с форматированными текстовыми стилями. Я добавил отступы слева к последней метке и отступы справа к первой метке, чтобы подтолкнуть их «внутрь».
Хотя это исправляет усечение, возникает новая проблема: визуальное расстояние между первой меткой и второй меткой становится меньше, чем остальные. То же самое происходит и с последней меткой. Кажется, что изменение стиля метки с помощью заполнения визуально смещает текст, но не корректирует расчетную логику распределения, что приводит к неравномерным промежуткам.
Мой вопрос Есть ли правильный способ предотвратить обрезание первой и последней меток по оси X, когда сетка: { left: 0, right: 0 , не нарушая при этом автоматический равноотстоящий интервал между метками?
Минимально воспроизводимый пример Вот конфигурация, которую я использую:
// Generate simple mock data (Short enough to show all labels clearly)
var dataX = ['09:30', '10:00', '10:30', '11:00', '11:30', '13:00', '14:00', '15:00'];
var dataY = [120, 132, 101, 134, 90, 230, 210, 150];
return {
// 1. Grid set to 0 to force chart to edges
grid: {
top: '10%',
left: '0', // Force align left edge
right: '0', // Force align right edge
bottom: '15%',
containLabel: false // MUST be false to reproduce the truncation issue
},
xAxis: {
type: 'category',
data: dataX,
boundaryGap: false, // Line starts exactly at the Y-axis
axisTick: { show: false },
axisLine: {
lineStyle: { color: '#E0E0E0' }
},
axisLabel: {
margin: 10,
show: true,
color: '#666',
fontSize: 12,
align: 'center',

// Force show ALL labels to demonstrate the uneven spacing issue
// interval: 0,

// 2. The Formatter: Apply rich text styles only to first and last label
formatter: function (value: any, index: any) {
if (index === 0) {
return '{start|' + value + '}';
}
if (index === dataX.length - 1) {
return '{end|' + value + '}';
}
return value;
},

// 3. The Workaround causing the issue:
// Using padding to shift first/last labels inwards to prevent truncation.
// PROBLEM: This visually shifts the text but messes up the equidistant spacing.
rich: {
start: {
align: 'left',
fontSize: 12,
// Pushing the first label to the right (inwards)
padding: [0, 0, 0, 30]
},
end: {
align: 'right',
fontSize: 12,
// Pushing the last label to the left (inwards)
padding: [0, 30, 0, 0]
}
}
}
},
yAxis: {
type: 'value',
show: true,
axisLine: { show: false },
axisLabel: {
inside: true, // Labels inside the chart
margin: 0,
verticalAlign: 'bottom',
color: '#999',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: { color: '#E0E0E0' }
}
},
series: [
{
name: 'Value',
type: 'line',
data: dataY,
symbol: 'none', // Hide dots for cleaner look
lineStyle: {
width: 1,
color: '#F56C6C'
}
}
]
};


Подробнее здесь: https://stackoverflow.com/questions/798 ... first-last