echarts中地图与表格联动效果

        echarts中地图与表格数据联动，当鼠标在地图上滑入某个区域时，不仅地图中该区域高亮显示，数据表格中的该条数据也会高亮显示。另外当鼠标移入表格中的某条数据时，地图中想对应的区域会自动高亮提示。

        

   鼠标移入通州区后，下放表格的通州区数据也会自动高亮，可以更便捷使用。实现的代码如下：

   首先绘制北京市地图，然后给表格填充数据。html代码如下：

   

<div class="map">
       
    <div class="map4" id="map_1"></div>
    <div class="map-table">
        <table>
            <thead>
              <tr>
                <th>地区(企业盈利TOP4)</th>
                <th>占地（m²）</th>
                <th>用电（W）</th>
                <th>耗能</th>
                <th>税收</th>
                <th>盈利</th>
                <th>成长指数</th>
              </tr>
            </thead>
            <tbody>
             
            </tbody>
        </table>
    </div>
</div>

 js代码如下：

// 循环生成地图下的table表格
    var addressList = [
        {'name':'朝阳区','contain':'1.2万','Electricity':'3000','energy':'1500','tax':'1.1万','sale':'5.0万','grow':'1'},
        {'name':'东城区','contain':'1.0万','Electricity':'2000','energy':'1200','tax':'1.1万','sale':'3.0万','grow':'2'},
        {'name':'通州区','contain':'2.1万','Electricity':'5880','energy':'3600','tax':'1.1万','sale':'2.0万','grow':'3'},
        {'name':'西城区','contain':'1.1万','Electricity':'2550','energy':'1470','tax':'1.1万','sale':'1.8万','grow':'4'}
    ];
    function tableList(){
        var appendHTML = "";
        if($(".map-table tbody tr").length>0){
            $(".map-table tbody tr").remove();
        }

        for(var i=0; i<addressList.length; i++){
            appendHTML = "<tr><td>"+
            addressList[i].name+"</td><td>"+
            addressList[i].contain+"</td><td>"+
            addressList[i].Electricity+"</td><td>"+
            addressList[i].energy+"</td><td>"+
            addressList[i].tax+"</td><td>"+
            addressList[i].sale+"</td><td>"+
            addressList[i].grow+"</td></tr>";
            
            $(".map-table tbody").append(appendHTML);
        }
        
    }
tableList();

绘制北京市地图的代码如下：

// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
        $.get('js/beijing.json', function(geoJson) {

           // myChart.hideLoading();
        
            echarts.registerMap('beijing', geoJson);
        
            myChart.setOption(option = {
                
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} '
                },
               
                 visualMap: {
                     show:false,
                     min: 800,
                     max: 50000,
                     text:['High','Low'],
                     realtime: false,
                     calculable: true,
                     inRange: {
                         color: ['#50c5fb','#50fbdd']
                     }
                },
                
                series: [
                    {
                        name: '北京企业园区调查',
                        type: 'map',
                        mapType: 'beijing', // 自定义扩展图表类型
                        // 定义地图中的各省份标签
                        label:{
                            normal: {
                                show: false, //显示省份标签
                                textStyle: {
                                    color: "#000"
                                } //省份标签字体颜色
                            },
                            emphasis: { //对应的鼠标悬浮效果
                                show: false,
                                itemStyle:{
                                    areaColor: '#405bf9'
                                },
                                textStyle: {
                                    color: "#800080"

                                }
                            }
                        },
                        // 鼠标悬浮区域时，背景颜色
                        itemStyle:{
                            emphasis:{
                                label:{
                                    show:true
                                },
                                borderWidth: .10,
                                borderColor: '#4b0082',
                                areaColor:"rgba(5,237,251,.5)",
                            }
                        },
                        // 鼠标悬浮时，对应的数据展示
                        data:[
                            {name: '通州区', value: 20057.34},
                            {name: '朝阳区', value: 15477.48},
                            {name: '东城区', value: 31686.1},
                            {name: '西城区', value: 6992.6},
                            {name: '昌平区', value: 44045.49},
                            {name: '顺义区', value: 40689.64},
                            {name: '平谷区', value: 37659.78},
                            {name: '密云区', value: 45180.97},
                            {name: '怀柔区', value: 55204.26},
                            {name: '延庆区', value: 21900.9},
                            {name: '海淀区', value: 4918.26},
                            {name: '石景山区', value: 5881.84},
                            {name: '门头沟区', value: 4178.01},
                            {name: '房山区', value: 2227.92},
                            {name: '大兴区', value: 2180.98},
                            {name: '丰台区', value: 9172.94}
                        ],
                        
                    }
                ],
                
            });

绘制地图完成后，下边就要实现图表联动了；这是鼠标移入地图时，让表格也可以实现高亮。移出时，表格取消高亮。

//  移入该区域时，高亮
             myChart.on('mouseOver', function(params){
                 console.log(params);//此处写点击事件内容
                 for(var i=0;i<addressList.length;i++){
                    // data11[i].value="0";
                     if(params.name == addressList[i].name){
                         console.log(params.name);
                         //addressList[i].value="1";
                         //选中高亮
                        myChart.dispatchAction({ type: 'highlight', name:params.name});
                        $(".map-table tbody tr").eq(i).addClass('highTr');
                        
                     }
                 }
             });
            //  移出该区域时，取消高亮
             myChart.on('mouseOut', function(params){
                console.log(params);//此处写点击事件内容
                for(var i=0;i<addressList.length;i++){
                   // data11[i].value="0";
                    if(params.name == addressList[i].name){
                        console.log(params.name);
                        //取消高亮
                        myChart.dispatchAction({ type: 'downplay', name:params.name});
                       
                        $(".map-table tbody tr").eq(i).removeClass('highTr');
                    }
                }
            });

接下来实现鼠标移入表格，实现地图区域高亮；

// 鼠标移入的第几行数据
$(".map-table tbody").find('tr').on('mouseenter',function(){
    var hang = $(this).prevAll().length;
    myChart.dispatchAction({ type: 'highlight', name:addressList[hang].name});//选中高亮        
})
// 鼠标移出的第几行数据
$(".map-table tbody").find('tr').on('mouseleave',function(){
    var hang = $(this).prevAll().length;
    myChart.dispatchAction({ type: 'downplay', name:addressList[hang].name});//取消高亮    
})