首页　>　文章列表　>　Echarts Tooltip如何实现汉字和数值的对齐？

Echarts Tooltip如何实现汉字和数值的对齐？

290 2025-02-22

ECharts Tooltip 内容精准对齐技巧

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

解决方案：利用 HTML 表格

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

) 来控制汉字和数值的对齐方式：

formatter: function(param) {
  let tip = '

';
  for (let i = 0; i < param.length; i++) {
    tip += `

`;
  }
  tip += '

${param[i].marker} ${param[i].seriesName}

${param[i].data.displayValue || param[i].value[1] + '笔'}

';
  return tip;
}

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

来源：1739970628

上一篇　LNMP中PHP如何连接数据库下一篇　正则表达式字面量和new RegExp()结果不一致，是什么原因？