如何在ECharts中动态格式化X轴与Y轴标签？

1. 标签hover时显示tooltip #

通过监听图表的鼠标事件，结合自定义DOM tooltip实现精准控制：

const chart = echarts.init(document.getElementById('chart'));
// 创建自定义tooltip元素
const tooltipDom = document.createElement('div');
tooltipDom.style.cssText = 'position:absolute; background:rgba(0,0,0,0.7); color:#fff; padding:4px 8px; border-radius:4px; display:none; pointer-events:none; z-index:9999;';
document.body.appendChild(tooltipDom);

// 监听标签hover事件
chart.on('mouseover', params => {
  if (params.componentType === 'xAxis') {
    const { offsetLeft, offsetTop } = chart.getDom();
    tooltipDom.style.left = `${offsetLeft + params.event.offsetX + 10}px`;
    tooltipDom.style.top = `${offsetTop + params.event.offsetY + 10}px`;
    tooltipDom.textContent = params.value;
    tooltipDom.style.display = 'block';
  }
});

// 监听标签离开事件
chart.on('mouseout', params => {
  if (params.componentType === 'xAxis') {
    tooltipDom.style.display = 'none';
  }
});

如果不需要完全自定义，也可以将图表内置tooltip的trigger设为'axis'，配合axisPointer配置，hover时自动展示包含轴标签的提示框。

2. 根据空间动态截断标签名称 #

利用Canvas测量文本宽度，结合容器空间分配，自动截断过长标签：

// 文本截断工具函数
function truncateLabel(label, maxWidth, fontSize = 14) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px sans-serif`;
  let truncated = label;
  if (ctx.measureText(label).width > maxWidth) {
    while (ctx.measureText(truncated + '...').width > maxWidth && truncated.length > 0) {
      truncated = truncated.slice(0, -1);
    }
    truncated += '...';
  }
  return truncated;
}

// 在图表配置中应用
const containerWidth = document.getElementById('chart').offsetWidth;
const labelCount = xAxisData.length;
// 给标签预留20%的间距，计算单标签最大宽度
const maxLabelWidth = (containerWidth / labelCount) * 0.8;

option = {
  xAxis: {
    data: xAxisData.map(label => truncateLabel(label, maxLabelWidth)),
    axisLabel: {
      width: maxLabelWidth,
      overflow: 'truncate'
    }
  }
};

3. 标签较多时动态显示交替标签 #

通过判断标签总宽度与容器宽度的比例，过滤显示交替标签：

const containerWidth = document.getElementById('chart').offsetWidth;
const labelCount = xAxisData.length;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '14px sans-serif';
// 计算所有标签的总宽度
const totalLabelWidth = xAxisData.reduce((sum, label) => sum + ctx.measureText(label).width, 0);

let displayData = xAxisData;
// 总宽度超过容器80%时，显示交替标签
if (totalLabelWidth > containerWidth * 0.8) {
  displayData = xAxisData.map((label, index) => index % 2 === 0 ? label : '');
}

option = {
  xAxis: {
    data: displayData,
    axisLabel: {
      formatter: value => value || ''
    }
  }
};

4. 空间不足时动态旋转标签 #

根据标签总宽度判断是否需要旋转，自动调整旋转角度：

const containerWidth = document.getElementById('chart').offsetWidth;
const labelCount = xAxisData.length;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '14px sans-serif';
const totalLabelWidth = xAxisData.reduce((sum, label) => sum + ctx.measureText(label).width, 0);

let rotateAngle = 0;
// 总宽度超过容器宽度时，旋转45度（可根据需求调整角度）
if (totalLabelWidth > containerWidth) {
  rotateAngle = 45;
}

option = {
  xAxis: {
    axisLabel: {
      rotate: rotateAngle,
      interval: 0 // 强制显示所有标签
    }
  }
};

关于获取X轴轴线宽度的问题 #

无需直接获取axisline宽度，通过以下方式即可获取可用空间：

// 方式1：获取图表容器宽度
const containerWidth = document.getElementById('chart').offsetWidth;
// 方式2：通过图表实例获取可视区域宽度
const viewPort = chart.getViewPort();
const availableWidth = viewPort.width;
// 方式3：获取X轴的实际布局宽度
const xAxisModel = chart.getModel().getComponent('xAxis');
const axisRect = xAxisModel.axis.getBoundingRect();
const axisWidth = axisRect.width;

内容的提问来源于stack exchange，提问作者Rahul Shrivastava