echarts tooltip自适应宽高让提示框适应不同屏幕尺寸demo

  tooltip: {

  trigger: "axis",

  backgroundColor: "#54AEEC", //设置背景图片 rgba格式

  color: "#fff",

  height: "50px",

  padding: [15, 15],

  enterable: true,//滚动条

  extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滚动条

  textStyle: {

  color: "white", //设置文字颜色

  padding: 10,

  fontSize: 14

  },

  //改变提示框的位置 不超出屏幕显示

  position: function(point, params, dom, rect, size) {

  //其中point为当前鼠标的位置,

  //size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小

  // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下

  // 提示框位置

  var x = 0; // x坐标位置

  var y = 0; // y坐标位置

  // 当前鼠标位置

  var pointX = point[0];

  var pointY = point[1];

  // 提示框大小

  var boxWidth = size.contentSize[0];

  var boxHeight = size.contentSize[1];

  // boxWidth > pointX 说明鼠标左边放不下提示框

  if (boxWidth > pointX) {

  x = 5;

  } else {

  // 左边放的下

  x = pointX - boxWidth;

  }

  // boxHeight > pointY 说明鼠标上边放不下提示框

  if (boxHeight > pointY) {

  y = 5;

  } else {

  // 上边放得下

  y = pointY - boxHeight;

  }

  return [x, y];

  }

  },