echart湖南地图

最新推荐文章于 2025-12-03 15:43:40 发布

原创

最新推荐文章于 2025-12-03 15:43:40 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在项目中运用Echarts地图组件绘制湖南地图，包括各市的详细坐标数据，以及设置地图的交互功能。通过注册地图数据，定义option和series，实现地图的绘制，并讨论了数据异步加载的实现。

最近项目中用到echart地图组件，湖南地图完整版本（提供下坠功能），供大家参考。

1、对地图数据进行注册，制定mapId。

echarts.registerMap(mapId,json坐标数据项);

hnMap.js中注册了湖南省，以及各地市的坐标数据。

分别对应为：hnMap（全省）、csMap（长沙）、xtMap（湘潭）、zzMap（株洲）、hyMap（衡阳）、syMap（邵阳）、yyMap（岳阳）、cdMap（常德）、zjjMap（张家界）、yiyMap（益阳）、czMap（郴州）、yzMap（永州）、hhMap（怀化市）、ldMap（娄底）、xxMap（湘西）。

2、定义echart的option

定义option

var  option = {
	tooltip: {//提示信息
           trigger: 'item',
            formatter :function(param){
            	if(param.data!=null&&param.data!='undefined'){
           	 		var valueData=param.data.value;
            	    return param.marker +param.data.name+'<br/>'+'标题：'+valueData+'';
            	}else
            		return '';
        	}
        },
        //颜色选取器（数据可视化visualMap）
        visualMap: {
        	type: 'co