echarts 鼠标事件有偏移echarts 折线配置项内容和展示

由于特定需求需要在一个svg里的一个固定部分显示曲线，曲线可以显示，但是鼠标位置错误，结构如下 <svg style="width:100%; height: 100%"> <foreignObject width="1342" height="608"> <div id="echart" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height: 100%"></div> </foreignObject> </svg>

      var arrayX = ["场景1", "场景2", "场景3", "场景4", "场景5", "场景6", "场景7", "场景8", "场景9", "场景10", "场景11", "场景12", "场景13", "场景14", "场景15", "场景16", "场景17", "场景18", "场景19", "场景20", "场景21", "场景22", "场景23", "场景24", "场景25", "场景26", "场景27", "场景28", "场景29", "场景30", "场景31", "场景32", "场景33", "场景34", "场景35", "场景36", "场景37", "场景38", "场景39"];
var arrayY = [8.082, 2.888, 7.158, 7.249, 3.539, 1.872, 2.74, 6.119, 3.231, 1.621, 2.283, 2.146, 4.372, 4.155, 3.345, 1.13, 3.276, 3.893, 1.804, 1.233, 3.596, 0.731, 3.139, 1.176, 2.603, 1.941, 1.301, 2.078, 2.215, 1.61, 1.347, 1.005, 1.073, 0.297, 1.027, 0.982, 0.422, 0.4, 0.925];
option = {
    title: {
        text: null
    },
    tooltip: {
        trigger: 'axis'
    },
    color: ['#59476E'],
    legend: {
        data: ['概率']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: arrayX
    },
    yAxis: [{
        type: 'value',
        name: "概率%",
        axisLabel: {
            formatter: '{value} %'
        }
    }],
    series: [{
        name: '概率',
        type: 'line',
        data: arrayY,
        lineStyle: {
            color: '#59476E'
        }
    }]
};