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

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

使用confine属性的优点 :在dom容器里面,不会出现数据显示被遮住
使用confine属性的缺点 :在dom容器里面,当数据量过多时,整个tooltips盖住了下面的图表,

      tooltip: { // 提示框
          trigger: 'axis',
          confine: true // 限制tootip在容器内
     }

echarts tooltips数据内容过多超出显示范围_第1张图片
echarts tooltips数据内容过多超出显示范围_第2张图片

第二种:使用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 += `
                    
${ele.color};border-radius: 10px;"> ${ele.seriesName}: ${data}
`
} }) const b = '
' + astr + '
' return b }, position: function (point, params, dom, rect, size) { return [point[1], 0] } }

echarts tooltips数据内容过多超出显示范围_第3张图片

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

echarts tooltips数据内容过多超出显示范围_第4张图片

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

echarts tooltips数据内容过多超出显示范围_第5张图片

你可能感兴趣的:(echarts,javascript,ecmascript)