标签导航：

echarts tooltip如何实现汉字和数值的对齐？

ECharts Tooltip 内容精准对齐技巧

ECharts 的 Tooltip 标签内容对齐，特别是汉字和数值的精确对齐，可以通过 formatter 函数巧妙实现。

解决方案：利用 HTML 表格

最有效的方法是利用 HTML 表格元素 (

) 来控制汉字和数值的对齐方式： 
formatter: function(param) {
  let tip = '<table style="width: 100%">';
  for (let i = 0; i < param.length; i++) {
    tip += `<tr>
              <td style="text-align: left; padding-right: 5px;">${param[i].marker} ${param[i].seriesName}</td>
              <td style="text-align: right;">${param[i].data.displayValue || param[i].value[1] + '笔'}</td>
            </tr>`;
  }
  tip += '</table>';
  return tip;
}

这段代码使用表格的 text-align 属性分别将汉字左对齐，数值右对齐，并添加 padding-right 保证数值与汉字之间有适当的间距。 param[i].data.displayValue || param[i].value[1] + '笔' 确保即使 displayValue 不存在也能正确显示数值，并添加单位“笔”。 通过这种方式，可以确保 Tooltip 中的汉字和数值始终保持整齐美观的对齐效果。