echarts中tooptips提示框超出了怎么解决

我们在制作echarts表格时，有时候会遇到提示框内容较多，会让提示框超出，展示不全数据，如下：

这种情况下需要在tooltips下增加一些属性：

1.confine: true：这个配置的作用是让提示框（tooltip）限制在图表的区域内。

也就是说，当提示框的位置计算出来可能超出图表范围时，会自动调整提示框的位置，确保提示框完全在图表的可视范围内。

2.extraCssText: 'max - width: none; overflow: visible;'

max - width: none：它表示取消对提示框最大宽度的限制。默认情况下，提示框可能会有一个最大宽度的限制，设置为none后可以允许提示框根据内容的需要自由扩展宽度。
overflow: visible：这个属性的设置使得当提示框的内容超出其本身的区域时，允许内容溢出显示，而不是被裁剪掉，这样就可以保证提示框内的所有内容都能够展示出来。

这两个配置结合起来，可以在一定程度上解决提示框内容显示不完整的问题，尤其是当提示框的内容较多或者提示框容易超出图表区域的情况。

代码如下：

confine: true,
extraCssText: 'max - width: none; overflow: visible;',

全部代码如下：

    var chartDom = document.getElementById('lineChart1');var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'axis',borderWidth: 1,borderColor: '#2ba4d4',padding: 5,textStyle: {fontSize: 16},confine: true,extraCssText: 'max - width: none; overflow: visible;',formatter: function(params) {var relVal = params[0].name +'(波长/nm)'for (var i = 0, l = params.length; i < l; i++) {relVal += '<br/>' + params[i].marker + params[i].seriesName+':'+  + params[i].value}return relVal},},legend: {right: '3%',lineStyle: {type: 'solid'},textStyle: {color: '#fff',},itemWidth: 15,itemHeight: 2,},grid: {left: '1%',right: '1%',top: '17%',bottom: '2%',containLabel: true},color: ['#FFC91A', '#52FFD6', '#FC364D', '#00D1FF', '#B2FFAB'],xAxis: {name:'波长/nm',type: 'category',axisLabel: {color: '#eceeee',margin: 3,},z: 10,axisTick: {show: true, color: '#c6cccf'},//x轴刻度线data: date,},yAxis: {// name: '(元/kg)',type: 'value',nameTextStyle: {color: '#eceeee'},axisLabel: {textStyle: {color: '#eceeee'},formatter: "{value}",},splitLine: {lineStyle: {color: '#677d7a',type: 'dashed'}},axisLine: {show: false},},series: [{name: '第一次',type: 'line',data: numMy},{name: '第二次',type: 'line',data: numKy},{name: '第三次',type: 'line',data: numAd33},{name: '第四次',type: 'line',data: numAd44},{name: '第五次',type: 'line',data: numAd55},]};option && myChart.setOption(option);

运行效果：