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

 分类:echarts时间:2022-08-04 07:30:04点击:

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);
        //逻辑控制
        ......
    });
}
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: