摘要：項(xiàng)目要求左右兩張地圖能夠在鼠標(biāo)懸浮的時(shí)候高亮部分聯(lián)動(dòng)，曾嘗試了不好使，所以自己寫了這段代碼。遇見的坑使用引發(fā)，會(huì)發(fā)現(xiàn)只能顯示很短的時(shí)間，所以我鼠標(biāo)移入地圖時(shí)，給另一個(gè)地圖設(shè)置和。而獲取的時(shí)候會(huì)成為數(shù)組，也許是為了滿足多個(gè)的需求。

項(xiàng)目要求左右兩張地圖能夠在鼠標(biāo)懸浮的時(shí)候高亮部分聯(lián)動(dòng)，曾嘗試了connect不好使，所以自己寫了這段代碼。代碼思路為：

鼠標(biāo)移入地圖時(shí)，另一側(cè)的地圖根據(jù)鼠標(biāo)懸浮獲取到的區(qū)域name使該區(qū)域高亮；

鼠標(biāo)移入地圖時(shí)，根據(jù)鼠標(biāo)在地圖的坐標(biāo)位置，使另一側(cè)的地圖tooltip懸浮于獲取的坐標(biāo)位置，保證兩張地圖的tooltip的位置相同。

遇見的坑：

使用dispatchAction引發(fā)showTip，會(huì)發(fā)現(xiàn)tooltip只能顯示很短的時(shí)間，所以我鼠標(biāo)移入地圖時(shí)，給另一個(gè)地圖設(shè)置tooltip[0].alwaysShowContent=true和tooltip[0].triggerOn="none"。官網(wǎng)要求使用dispatchAction引發(fā)showTip需要設(shè)置triggerOn="none"，但是我試了有沒有都行，有alwaysShowContent=true就行;

在設(shè)置tooltip的時(shí)候，使用的是對(duì)象。而獲取的時(shí)候tooltip會(huì)成為數(shù)組，也許echarts是為了滿足多個(gè)tooltip的需求。

函數(shù)只要傳進(jìn)去echarts實(shí)例就行，代碼如下：

//前面的代碼省略直接調(diào)用，傳入echarts實(shí)例對(duì)象
connectMap(chart1,chart2);

function connectMap(chart1,chart2){
    //當(dāng)鼠標(biāo)移入左側(cè)的地圖上
        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"
        })
    })

    //當(dāng)鼠標(biāo)移到右邊的地圖
    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"
        })
    })
}