echarts解决折线图提示框动态提示框展示不全

解决思路： 改变的动态位置

解决问题的截图：（框出来的这段代码就可以）

话不多说直接上代码：

export const lineAreaOption = {
    tooltip: {
        trigger: 'axis',
        position: function (point, params, dom, rect, size) { // 加上这段代码是为了解决提示框现实不全的问题
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
                x = pointX - 40; // 根据情况设置这里的数字
            } else { // 左边放的下
                x = pointX - boxWidth - 10;
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
                y = 5;
            } else { // 上边放得下
                y = pointY - boxHeight;
            }
            return [x, y];
        },
        axisPointer: {
            type: 'shadow',
            textStyle: {
                color: '#fff',
                fontSize: nowSize(12)
            }
        }
    },
    legend: {
        type: 'plain',
        icon: 'circle',
        right: '0%',
        itemWidth: nowSize(12),
        itemHeight: nowSize(12),
        textStyle: {
            color: '#D7EAF2'
        }
    },
    grid: {
        left: '0%',
        top: '15%',
        right: '8%',
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false, // 坐标轴两边留白
        data: [],
        axisLabel: {
            show: true,
            textStyle: {
                color: '#051024',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
            }
        },
        axisTick: {
            // 坐标轴刻度相关设置。
            show: false
        },
        axisLine: {
            // 坐标轴轴线相关设置
            show: true,
            lineStyle: {
                color: '#000'
            }
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '',
            nameTextStyle: {
                color: '#051024'
            },
            axisLabel: {
                textStyle: {
                    color: '#051024',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#000'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#2A5073',
                    type: 'dashed'
                }
            }
        }
    ],
    series: []
}

问题截图：

解决成功的效果图：