echart地图点击事件使用一例

公司准备在旅博会来一发，做几张炫酷的报表，打算用echart，demo里有一张迁徙图比较符合需求 

改造开始：在地图上标注一些地点，鼠标经过展示一张报表
1、修改浮层提示为图片
tooltip就是鼠标放在地图上显示的浮层提示
自定义提示需要修改formatter

option = {



    tooltip : {



    trigger: 'item',



    formatter: '{b}'




    }



},

定义图片列表

var $imgs = [{area: '北京', url:'1.jpg'}]

tooltip : {



            trigger: 'item',



            formatter: function (params,ticket,callback){



                var $pna = params.name;



                var res = '';



 



                for(var i = 0;i<$imgs.length;i++){



                    if($imgs[i].area == $pna){



                        res = '<img src="'+ $imgs[i].url +'" />';//设置自定义数据的模板，这里的模板是图片




                        //console.log(res);




                        break;



                    }



                }



 



                setTimeout(function (){



                    // 仅为了模拟异步回调




                    callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码




                }, 1000)



                return 'loading';



            }



 



        }

效果如下：

浮层图片是静态的，考虑还是动态生成图表的好。

2、设置点击事件

//设置点击事件  



myChart.on('click', function (params) {



    var city = params.name;  



    alert(city);  



});