echarts刚加载时触发tooltip会使height变化解决例子

可以在echarts的option中加入一个tooltip的回调函数，当tooltip显示时，动态修改图表的高度即可。

以下是一个示例代码：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 定义初始高度
var chartHeight = 400;

// 设置option
var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // 在tooltip中加入回调函数
    formatter: function(params) {
      // 动态设置图表高度
      myChart.resize({height: chartHeight + 50});

      // 返回tooltip文本
      return params[0].name + ': ' + params[0].value;
    },
    // 在tooltip隐藏时还原图表高度
    hideDelay: 100,
    hideDelayOnMouseOut: 0,
    enterable: true,
    leaveable: true,
    transitionDuration: 0,
    extraCssText: 'overflow:visible;'
  },
  ...
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 监听tooltip隐藏事件
myChart.on('hideTip', function () {
  myChart.resize({height: chartHeight});
});

在上面的代码中，我们定义了一个变量`chartHeight`来存储初始高度。然后在tooltip的formatter回调函数中，使用`myChart.resize()`方法来动态修改图表的高度，将高度增加50像素，以便显示tooltip。在tooltip隐藏时，我们通过监听`hideTip`事件，使用`myChart.resize()`方法将高度还原成初始高度。

注意，为了避免tooltip显示时被遮挡，我们在tooltip的extraCssText中加入了`overflow:visible;`，以便让tooltip的内容溢出到图表外部。同时，我们也将tooltip的hideDelay和hideDelayOnMouseOut设置为0，以避免鼠标移出图表区域时tooltip立即隐藏。