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);

运行效果：

完美解决，撒花~~~