ECharts Tooltip 内容精准对齐技巧
ECharts 的 Tooltip 标签内容对齐，特别是汉字和数值的精确对齐，可以通过 formatter 函数巧妙实现。
解决方案：利用 HTML 表格
最有效的方法是利用 HTML 表格元素 (<table>) 来控制汉字和数值的对齐方式：
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code class="javascript">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;
}</code></pre> 属性分别将汉字左对齐，数值右对齐，并添加 padding-right 保证数值与汉字之间有适当的间距。 param[i].data.displayValue || param[i].value[1] + '笔' 确保即使 displayValue 不存在也能正确显示数值，并添加单位“笔”。 通过这种方式，可以确保 Tooltip 中的汉字和数值始终保持整齐美观的对齐效果。
以上就是Echarts Tooltip如何实现汉字和数值的对齐？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
589
收藏
