0x1f57 commented on issue #9265:
URL: https://github.com/apache/echarts/issues/9265#issuecomment-1840276220
在echarts实例setOption后调用下述方法可暂时解决此问题
`javascript
/**
* 修复Y轴名称间隔问题(Y轴名称与Y轴刻度标签重叠问题)
* @param {EChartsType} chartInstance
*/
export function fixYAxisNameGap(chartInstance) {
const globalModel = chartInstance._api.getModel()
const yAxisList = globalModel.option.yAxis
const ctx = document.createElement('canvas').getContext('2d')
const nameGapList = []
// 兼容多Y轴
yAxisList.forEach(({ nameTextStyle, axisLabel }, index) => {
const fontSize = nameTextStyle?.fontSize ?? 12
const fontFamily = nameTextStyle?.fontFamily ?? 'sans-serif'
ctx.save()
ctx.font = `${fontSize}px ${fontFamily}`
const yAxis = globalModel.getComponent('yAxis', index)?.axis
// 计算刻度标签文字最大宽度
const labelMaxWidth = Math.max(...yAxis.getViewLabels().map(item =>
ctx.measureText(item.formattedLabel).width))
const axisLabelMargin = axisLabel?.margin ?? 8
nameGapList.push(labelMaxWidth + axisLabelMargin + 5)
ctx.restore()
})
chartInstance.setOption({
yAxis: nameGapList.map(nameGap => ({ nameGap }))
})
}
`
--
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]
