首页 > 网站 > WEB开发 > 正文

Echarts地图省市跳转数据展示

2024-04-27 15:14:05
字体:
来源:转载
供稿:网友

     介于前一段时间做了省市地图跳转的东西,遇到了一些问题,如今做下总结,希望日后可以用到,也可以帮到遇到同样问题的朋友。

       前提:Echarts3.0(其他版本不知道情况是否相同尴尬

一、数据准备

1、各省份对应的数据;

2、各城市对应的数据;

二、地图js下载

1、http://echarts.baidu.com/download-map.html

此页面提供了中国地图、世界地图、各省地图的下载,支持js、json两种格式,当前采用js格式。

2、省市跳转,需要用到中国地图、各省地图,将其下载到本地,引用到自己的页面。

三、数据展示

1、页面引用了Echarts工具js和地图js后,需要添加几行代码:

<script type="text/javascript">    // 路径配置    require.config({        paths: {            echarts: 'http://echarts.baidu.com/build/dist'        }    });    // 使用    require(        [            'echarts',            'echarts/chart/map'         ]	);            </script>

2、其次页面创建一片区域供实例展示:

<div style="border-style:solid; border-width:1px; border-color:#ccc;margin-top: 10px;background-color: #F4F4F4;">	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->	<div id="main" style="height:600px;margin-top: 20px;"></div></div>

3、js文件中,查询数据并进行图表初始化:

 $.Ajax({		type : "post",		url : "../../componentsStatistics/componentsPRvncGatherStatistics.do?"+params,		dataType : 'json',		async : false,//设置为同步操作就可以给全局变量赋值成功 		success : function(data) {			optionData = data.rows[0];		}	});	myChart = echarts.init(document.getElementById('main'));	componentPrvncStatistic(myChart,optionData);4、下面对componentPrvncStatistic方法进行说明:

1)数据接收、设置数据默认最大值

//数据准备var seriesData = optionData.seriesData;//设置默认值为100var maxFunnelValue = getMaxDataValue(seriesData);if (maxFunnelValue==null || maxFunnelValue=="") {      maxFunnelValue = 100;}2)注册配置以及事件,省名称列表初始化,省名称要是以下形式,省份地图才会展示,需要做好配对。

 var ecConfig = require('echarts/config');	var zrEvent = require('zrender/tool/event');	var curIndx = 0;	var flag = true;	var mapType = [	    'china',	    // 23个省	    '广东', '青海', '四川', '海南', '陕西', 	    '甘肃', '云南', '湖南', '湖北', '黑龙江',	    '贵州', '山东', '江西', '河南', '河北',	    '山西', '安徽', '福建', '浙江', '江苏', 	    '吉林', '辽宁', '台湾',	    // 5个自治区	    '新疆', '广西', '宁夏', '内蒙古', '西藏', 	    // 4个直辖市	    '北京', '天津', '上海', '重庆',	    // 2个特别行政区	    '香港', '澳门'	];3)点击某个省份时,对于城市名称比较密集的省份,屏蔽名称展示(如果有好的解决方法,欢迎留言,感谢!)

 myChart.on('click', function (param){	    var len = mapType.length;	    var mt = mapType[curIndx % len];	    if (mt == 'china') {	        // 全国选择时指定到选中的省份	        var selected = param.name;	        for (var i = 0 ; i<len ; i++) {	            if (selected) {	            	flag = true;	                mt = selected;	                if(mt=="海南"||mt=="北京"||mt=="天津"||mt=="重庆"||mt=="上海" ){	                	flag = false;	                }	                while (len--) {	                    if (mapType[len] == mt) {	                        curIndx = len;	                    }	                }	                break;	            }	        }	    } else {	    	flag = true;	        curIndx = 0;	        mt = 'china';	    }	    option.series[0].mapType = mt;	    option.series[0].itemStyle.normal.label.show = flag ;	    myChart.setOption(option);	});4)option准备
    option = {	    title: {	        text : '采集省统计'    //图表标题名称//            subtext : '(点击切换)'    //副标题           },	    tooltip : {	        trigger: 'item'	    },	    legend: {	        orient: 'vertical',	        x:'right',	        data:['采集数量(个)']	    },	    dataRange: {	        min: 0,	        max: maxFunnelValue,	        color:['#4198E6','#E0FFFF'],  //端值对应的颜色	        text:['高','低'],           // 文本,默认为数值文本	        calculable : true	    },	    color:['#2ECBCA','#B6A2DF','#59B1F0','#FFB880','#87CEFA'],  //图例的颜色	    toolbox: {	    	show: true,	    	orient : 'vertical',	    	x: 'right',	    	y: 'center',	    	feature : {	    	mark : {show: true},	    	dataView : {show: true, readOnly: false},	    	restore : {show: true},	    	saveAsImage : {show: true}	    }	    },	    series : [	        {	            name: '采集数量(个)',	            type: 'map',	            mapType: 'china',	            selectedMode : 'single',	            itemStyle:{	                normal:{label:{show:flag}},    //地图初始化城市名称是否展示	                emphasis:{label:{show:true}}   //鼠标移入城市名称是否展示	            },	            data:function(){					var serie=[];					var data = seriesData[0].dataArray;					for(var i=0;i<data.length;i++){						var item = {name:data[i].name, 								value:data[i].value						};						serie.push(item);					}					return serie;				}()    //此处的括号不可省略	        }	    ]	};5)set

        myChart.setOption(option); 	window.onresize = myChart.resize;

        以上是整个流程的概要说明,其中有很多地方有不足之处,还请批评指正!初学者可以参考思路,结合官方的Demo进行使用。

5、结果展示:

1)全国地图展示:

2)某个省份


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表