• 最近在做echarts图表的时候，因为数据过多，导致tooptip被遮蔽，显示不全各种问题，记录一下踩过的坑*
  1. 设置tooltip的appendToBody: true，后果如图：


更多的还是显示不全；

  1. 设置extraCssText也没起多大作用；
  2. 最初采纳了formatter回调函数的形式，本人拼写字符串，写行内款式，最次要的是设置一个最大高度，再设置内容超出滚动，包含设置backgroundColor与textStyle，最终解决了问题，如图：



设置最大高度，而高度设置为主动时，数据不多的状况下就没有滚动条

重点来了，附上代码

tooltip: {  trigger: 'axis',  axisPointer: { // 坐标轴指示器，坐标轴触发无效    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'  },  enterable: true, // 鼠标是否可进入提示框浮层中  hideDelay: 200, // 浮层暗藏的提早  confine: true,  backgroundColor: 'rgba(255,255,255, 1)',  formatter: function (params) {    var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params[0].axisValue + '</p>';    for (var i = 0; i < params.length; i++) {      htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';    }    htmlStr += '</div>'    return htmlStr  },  extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',  textStyle: {   fontSize: 12,   color: '#fff'  } }, legend: {   type: 'scroll',   orient: 'horizontal',   left: 15,   right: 15,   bottom: 10,   data: legendData,   pageButtonPosition: 'end'},

`
就这样吧~~~