echarts tooltips数据内容过多超出显示范围

<>第一种：使用echarts tooltips属性下的confine：限制tootip在容器内

使用confine属性的优点 ：在dom容器里面，不会出现数据显示被遮住
使用confine属性的缺点 ：在dom容器里面，当数据量过多时，整个tooltips盖住了下面的图表，
tooltip: { // 提示框 trigger: 'axis', confine: true // 限制tootip在容器内 }

<>第二种：使用echarts positon设置位置和formatter格式化数据分列展示，可以分多列。下图只展示两列

formatter和position相结合使用的优点：可以展示数据量很大的数据，宽度较大推荐使用
formatter和position相结合使用的缺点：弹出的宽度无法自适应，数据过小点显示留白较多，会影响原有的布局，产生滚动条
tooltip: { // 提示框 trigger: 'axis', formatter: function (params) { let astr = ''
console.log('params', params) params.forEach(ele => { const data = ele.data //
不为0的展示 if (ele.seriesName && data) { astr += ` <div style="display:
block;height:20px;width: 50%;float:left;"> <i style="width: 10px;height:
10px;display: inline-block;background:${ele.color};border-radius: 10px;"></i>
<span>${ele.seriesName}: ${data}</span> </div> ` } }) const b = '<div
style="min-width:300px">' + astr + '<div>' return b }, position: function (point
, params, dom, rect, size) { return [point[1], 0] } }

<>第三种：使用echarts tooltip属性属性下的appendToBody,把将 tooltip 的 DOM 节点添加为 HTML 的
的子节点，所有的数据都会展示

tooltip: { // 提示框 trigger: 'axis', appendToBody: true }

• « 上一篇：hashMap和hashTable的区别以及HashMap的底层原理？
• » 下一篇：老照片免费修复软件有哪些？一键智能修复老照片工具推荐给你