ECharts Tooltip 汉字与数值完美对齐方案
在使用ECharts图表时，Tooltip标签中的汉字和数值常常对齐不佳，影响图表的美观性。本文提供一种简洁有效的解决方案，确保Tooltip内容的精准对齐。
问题描述:
现有代码无法实现汉字和数值的精确对齐，导致Tooltip显示效果欠佳。(此处省略原代码，假设读者已了解问题所在)
期望效果: 汉字与数值在Tooltip中垂直对齐，呈现整齐美观的视觉效果。
解决方案：利用HTML表格实现对齐
最便捷的解决方法是使用HTML表格(<table>)。通过表格单元格的布局，轻松实现汉字和数值的精确对齐。
<p>改进后的代码：</p>
<pre class="brush:php;toolbar:false;"><code class="javascript">formatter: function(param) {
let tip = '<table cellpadding="2" style="width:100%">';
for (let i = 0; i < param.length; i++) {
tip += '<tr>';
tip += '<td style="width:10%;text-align:left;">' + param[i].marker + '</td>'; // 使用marker作为标识
tip += '<td style="width:65%;text-align:left;">' + param[i].seriesName + '</td>'; // 系列名称
tip += '<td style="width:25%;text-align:right;">' + (param[i].data.displayValue || param[i].value[1] + '笔') + '</td>'; // 数值，右对齐
tip += '</tr>';
}
tip += '</table>';
return tip;
}</code></pre>
<p><strong>代码说明:</strong></p>
<ul><li>使用<code><table>标签创建表格，并设置<code>width:100%使其占据Tooltip的全部宽度。
cellpadding="2"设置单元格内边距，使内容更清晰。<tr>和<code><td>标签创建表格行和单元格。
<li>
<code>style="width:10%;text-align:left;"设置单元格宽度和文本左对齐，用于显示marker和系列名称。style="width:25%;text-align:right;"设置数值单元格宽度和文本右对齐，确保数值与汉字对齐。param[i].data.displayValue || param[i].value[1] + '笔' 处理数值显示，优先使用displayValue，如果没有则使用value[1] + '笔'。效果展示: (此处应插入改进后Tooltip的截图，展示汉字和数值的完美对齐效果)
通过以上方法，可以有效解决ECharts Tooltip中汉字和数值对齐问题，提升图表的美观度和数据可读性。 记得根据实际数据结构调整代码中的字段名称。
