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

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

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

问题描述：

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

原始代码示例：

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

期望效果：

遨虾

1688推出的跨境电商AI智能体

69

查看详情

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

解决方案：

利用 HTML 的 <table> 标签，可以轻松实现自定义的布局和对齐方式。 <p><strong>改进后的代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;code class=&quot;javascript&quot;&gt;formatter: function(param) { let tip = '&lt;table&gt;'; tip += `&lt;tr&gt;&lt;td style=&quot;text-align: left;&quot;&gt;${param[0].name}&lt;/td&gt;`; tip += `&lt;td style=&quot;text-align: right;&quot;&gt;${param[0].data.displayValue}&lt;/td&gt;&lt;/tr&gt;`; for (let i = 1; i < param.length; i++) { tip += `&lt;tr&gt;&lt;td style=&quot;text-align: left;&quot;&gt;${param[i].marker} ${param[i].seriesName}&lt;/td&gt;`; tip += `&lt;td style=&quot;text-align: right;&quot;&gt;${param[i].value[1]}笔&lt;/td&gt;&lt;/tr&gt;`; } tip += '&lt;/table&gt;'; return tip; }&lt;/code&gt;</pre>

以上就是Echarts Tooltip标签：如何实现汉字左对齐、数值右对齐？的详细内容，更多请关注php中文网其它相关文章！