echarts tooltip悬浮框内容太多显示不全

ECharts Tooltip 高级用法

最新推荐文章于 2024-10-23 16:13:30 发布

原创最新推荐文章于 2024-10-23 16:13:30 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

echart 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 ECharts 的 tooltip 组件实现复杂的提示框效果，包括鼠标可进入提示框浮层进行互动，并通过自定义 formatter 函数来显示多系列数据。此配置适用于需要在图表中展示详细信息并与之交互的应用场景。

 tooltip: {
             enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
             formatter:function(params){
                       var str = '';
                       for (var i = 0; i < params.length; i++) {
                            str += '<p>'+params[i].marker+params[i].seriesName+':'+params[i].value+'</p>';
                                    }
                       var tooltipHtml = '<div style="width:150px;max-height:200px;overflow-y:auto">'+params[0].axisValue+str+'</div>';
                       return tooltipHtml;
                       }
             },