标签导航：

echarts tooltip标签：如何实现汉字左对齐、数值右对齐？

ECharts Tooltip 如何实现汉字左对齐、数值右对齐？

本文探讨如何在 ECharts 的 Tooltip 中，将标签内容的汉字部分左对齐，数值部分右对齐。

问题描述：

默认情况下，ECharts Tooltip 的内容显示为单列文本，无法直接控制汉字和数值的对齐方式。

原始代码示例：

formatter: function(param) {
    let tip = param[0].name + "<br/>";
    for (let i = 0; i < param.length; i++) {
        // ...  (此处省略部分代码，假设param[i].value[1]为数值) ...
    }
    return tip;
}

期望效果：

实现汉字左对齐，数值右对齐的表格样式。

解决方案：

利用 HTML 的

标签，可以轻松实现自定义的布局和对齐方式。

改进后的代码：

formatter: function(param) {
    let tip = '<table>';
    tip += `<tr><td style="text-align: left;">${param[0].name}</td>`;
    tip += `<td style="text-align: right;">${param[0].data.displayValue}</td></tr>`;
    for (let i = 1; i < param.length; i++) {
        tip += `<tr><td style="text-align: left;">${param[i].marker} ${param[i].seriesName}</td>`;
        tip += `<td style="text-align: right;">${param[i].value[1]}笔</td></tr>`;
    }
    tip += '</table>';
    return tip;
}

通过使用

标签和 text-align: left; 及 text-align: right; 属性，我们分别将汉字和数值内容进行左对齐和右对齐，从而达到预期效果。 此方法清晰地展现了数据，提高了 Tooltip 的可读性。