echarts地图点击事件(附地图点击事件完整实例代码)

echarts的地图点击事件，echarts的地图展示，有时候展示出的数据，虽然鼠标点击上去某个省份或者某个地方会有数据显示，但是点击一下地图没有任何动态效果，如何添加地图点击效果呢，这里自己也是坐下笔记，方便以后使用。

准备工作：

①到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.htm

②准备地图的坐标文件，就是本文示例中引用的beijing.js文件

说明：

代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger

地图中文字位置控制说明：

在我们自己准备的坐标文件中，在下载示例shenzhen.js文件中，搜索“cp”，即每个地区坐标的开头{"type":"Feature","id":"440308","properties":{"cp":[114.2712600002325,22.608372999871885],"name":"盐田区"} 中的cp中的坐标，没有的话，自己添加，这个坐标就是控制地图中文字显示的位置。

全国区县级json数据及完整示例下载地址：http://download.csdn.net/download/qq_21386275/10218492

echarts地图点击事件完整实例代码：

//地图展示
function map() {
    //url，将需要的数据查询出来，放到固定的省份的位置即可。
    var url = "xxxxxx.action";
    var array = new Array();
    $.ajax({
        url : url,
        dataType : "json",
        async : false,
        success : function(data){
            var datas = data.result;
            var length = datas.length;
            //逻辑控制
            ......
        }
    });
    //console.log(array);
    //将查询出的需要的省份的数据值存放到下面对应的地方
    var option = {
        tooltip : {
            trigger : 'item'
        },
        dataRange : {
            orient : 'horizontal',
            min : 0,
            max : 55000,
            text : [ '高', '低' ], // 文本，默认为数值文本
            splitNumber : 0
        },
        series : [ {
            name : '',
            type : 'map',
            mapType : 'china',
            mapLocation : {
                x : 'left'
            },
            selectedMode : 'multiple',
            itemStyle : {
                normal : {
                    label : {
                        show : true
                    }
                },
                emphasis : {
                    label : {
                        show : true
                    }
                }
            },
            data : [ {
                name : '西藏',
                value : array[1],
                selected : true,//此属性值是默认被选中
            }, {
                name : '青海',
                value : array[2],
            }, {
                name : '宁夏',
                value : array[3],
            }, {
                name : '海南',
                value : array[4],
            }, {
                name : '甘肃',
                value : array[5],
            }, {
                name : '贵州',
                value : array[6],
                selected : true,
            }, {
                name : '新疆',
                value : array[7],
            }, {
                name : '云南',
                value : array[8],
            }, {
                name : '重庆',
                value : array[9],
                selected : true,
            }, {
                name : '吉林',
                value : array[10],
            }, {
                name : '山西',
                value : array[11],
            }, {
                name : '天津',
                value : array[12],
            }, {
                name : '江西',
                value : array[13],
            }, {
                name : '广西',
                value : array[14],
            }, {
                name : '陕西',
                value : array[15],
            }, {
                name : '黑龙江',
                value : array[16],
            }, {
                name : '内蒙古',
                value : array[17],
            }, {
                name : '安徽',
                value : array[18],
                selected : true,
            }, {
                name : '北京',
                value : array[19],
                //selected : true,
            }, {
                name : '福建',
                value : array[20],
            }, {
                name : '上海',
                value : array[21],
                selected : true,
            }, {
                name : '湖北',
                value : array[22],
            }, {
                name : '湖南',
                value : array[23],
            }, {
                name : '四川',
                value : array[24],
                selected : true,
            }, {
                name : '辽宁',
                value : array[25],
            }, {
                name : '河北',
                value : array[26],
            }, {
                name : '河南',
                value : array[27],
            }, {
                name : '浙江',
                value : array[28],
                selected : true,
            }, {
                name : '山东',
                value : array[29],
                selected : true,
            }, {
                name : '江苏',
                value : array[30],
                selected : true,
            }, {
                name : '广东',
                value : array[31],
                selected : true,
            }, {
                name : '台湾',
                value : array[32],
            } ]
        } ],
        animation : false
    };
    myChart.setOption(option, true);
    //点击事件,根据点击某个省份计算出这个省份的数据
    myChart.on('click', function (params) {
        console.log(params);
        //逻辑控制
        ......
    });
}