两个echarts地图联动高亮区域

摘要：项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动，曾尝试了不好使，所以自己写了这段代码。遇见的坑使用引发，会发现只能显示很短的时间，所以我鼠标移入地图时，给另一个地图设置和。而获取的时候会成为数组，也许是为了满足多个的需求。

项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动，曾尝试了connect不好使，所以自己写了这段代码。代码思路为：

鼠标移入地图时，另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮；

鼠标移入地图时，根据鼠标在地图的坐标位置，使另一侧的地图tooltip悬浮于获取的坐标位置，保证两张地图的tooltip的位置相同。

遇见的坑：

使用dispatchAction引发showTip，会发现tooltip只能显示很短的时间，所以我鼠标移入地图时，给另一个地图设置tooltip[0].alwaysShowContent=true和tooltip[0].triggerOn="none"。官网要求使用dispatchAction引发showTip需要设置triggerOn="none"，但是我试了有没有都行，有alwaysShowContent=true就行;

在设置tooltip的时候，使用的是对象。而获取的时候tooltip会成为数组，也许echarts是为了满足多个tooltip的需求。

函数只要传进去echarts实例就行，代码如下：

//前面的代码省略直接调用，传入echarts实例对象
connectMap(chart1,chart2);

function connectMap(chart1,chart2){
    //当鼠标移入左侧的地图上
        chart1.on("mouseover",function(target){
            
            var option=chart2.getOption();
            option.tooltip[0].alwaysShowContent=true;
            option.tooltip[0].triggerOn="none";
            chart2.setOption(option,true);
            chart2.dispatchAction({
                type:"downplay",
                seriesName:"rightmap"
            })
            chart2.dispatchAction({
                type:"highlight",
                name:target.name,
            })
        
    })
    chart1.on("mousemove",function(target){
        
        chart2.dispatchAction({
            type:"showTip",
            name:target.name,
            x:target.event.offsetX,
            y:target.event.offsetY
        })
    })
    chart1.on("mouseout",function(){
        var option=chart2.getOption();
        option.tooltip[0].alwaysShowContent=false;
        option.tooltip[0].triggerOn="mousemove";
        chart2.setOption(option,true);
        chart2.dispatchAction({
            type:"hideTip"
        })
    })

    //当鼠标移到右边的地图
    chart2.on("mouseover",function(target){
        var option=chart1.getOption();
        option.tooltip[0].alwaysShowContent=true;
        option.tooltip[0].triggerOn="none";
        chart1.setOption(option,true);
        chart1.dispatchAction({
            type:"downplay",
            seriesName:"rightmap"
        })
        chart1.dispatchAction({
            type:"highlight",
            name:target.name,
        })
        
    })
    chart2.on("mousemove",function(target){
        
        chart1.dispatchAction({
            type:"showTip",
            name:target.name,
            x:target.event.offsetX,
            y:target.event.offsetY
        })
    })
    chart2.on("mouseout",function(){
        var option=chart1.getOption();
        option.tooltip[0].alwaysShowContent=false;
        option.tooltip[0].triggerOn="mousemove";
        chart1.setOption(option,true);
        chart1.dispatchAction({
            type:"hideTip"
        })
    })
}