©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>第一种：使用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 }