Customizing Tooltip Data Structure and Styles in ECharts
内容提要
本文介绍如何用 ECharts 自定义提示框样式：先定义 CSS 类 myEchartsTooltips，设置宽度、内边距、透明度、圆角、字号、颜色和阴影，并定义头部与内容区样式；再在 tooltip 中使用 position 回调，遍历 params 拼接系列名与数值，通过 $(dom).addClass 和 html 控制 DOM，实现数据结构与样式的自定义。
延伸解读
自定义提示框的样式实现方式
文章通过定义 CSS 类 myEchartsTooltips 来控制提示框的外观，包括宽度、内边距、透明度、圆角、字号、颜色和阴影。同时，还定义了头部和内容区的样式，如头部背景色、下边框，内容区的内边距和行高。这种方式将样式与逻辑分离，便于维护和复用。
利用 position 回调动态构建内容
在 tooltip 配置中，使用 position 回调函数，遍历 params 数组，拼接系列名和数值，并处理数值为 0 时显示为 '--'，以及名称小于 10 时补零。通过 jQuery 的 addClass 和 html 方法，将自定义的 HTML 结构插入到提示框 DOM 中，实现数据结构和样式的完全自定义。
注意事项与潜在限制
文章示例中使用了 jQuery 的 $ 和 addClass 方法，因此需要确保页面已加载 jQuery。此外，position 回调中直接操作 DOM 可能影响性能，尤其在数据量较大时。自定义 HTML 结构时需注意转义，避免 XSS 风险。这些细节在实际应用中需留意。
Q&A
ECharts 提示框自定义样式的 CSS 类名是什么？
CSS 类名为 myEchartsTooltips。
如何设置 ECharts 提示框的宽度、内边距和透明度？
在 .myEchartsTooltips 类中设置 width: 180px; padding: 0 !important; opacity: 0.8;。
ECharts 提示框的头部和内容区样式如何定义？
头部使用 .myEchartsTooltips .echartsTooltipsWarp-head 类，设置 padding: 5px 10px; background-color: #eee; border-bottom: 1px solid #e6e6e6; overflow: hidden;。内容区使用 .myEchartsTooltips .echartsTooltipsWarp-body 类，设置 padding: 0 10px; background-color: #fff; overflow: hidden;，其中 p 标签设置 overflow: hidden; line-height: 30px;。
在 ECharts 中如何通过 position 回调自定义提示框内容？
在 tooltip 配置中设置 position 回调函数，参数为 (pos, params, dom, rect, size)。在回调中遍历 params 数组，拼接系列名和数值，生成 HTML 字符串，然后通过 $(dom).addClass('myEchartsTooltips').html(sHtml) 更新 DOM。
如何格式化提示框中的数值和名称？
在遍历 params 时，对名称进行补零：var sName = params[i].name<10 ? '0' + params[i].name : params[i].name; 对数值为 0 时显示为 '--'：var iVal = params[i].value==0 ? '--' : params[i].value;。
自定义提示框时如何添加 CSS 类并设置 HTML 内容？
使用 $(dom).addClass('myEchartsTooltips').html(sHtml); 其中 sHtml 是拼接好的 HTML 字符串。
