echarts地图制作的一些问题总结

1.echarts地图不显示,只显示上面的图标。



       这个问题很头大,一开始当我从官网把示例copy下来运行发现,中国地图没有显示,只显示在地图上标注各个城市位置的图标,上网查了才知道,原来是因为我没有引入china.js中国地图这个js文件才导致的地图没有加载出来,把这个js引入就可以了。现在由于官网不提供下载可以直接引入这个地址来获取china.js文件:

<script type="text/javascript" src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
如果想要本地的china.js文件,后面我会放链接给你下载。。。

2.echarts地图的颜色没有根据值映射相应的颜色。

 随着上面问题的解决~~新问题又来了。引入china.js文件后如图所示:


但是官网给的例子却是下面这样的:

 可以发现我自己做的地图没有根据value值出现渐变颜色而是灰色的。。。这个问题其实是echarts.min.js源文件的问题,当时我在官网下载这个源文件时选择的是常用的js版本~~里面只有一些常用的饼,折,柱形图,并没有地图类的代码,所以我又去官网下载个完整版的echarts源文件替换时终于解决了~~

3.鼠标悬浮省份上时显示信息的自定义。

当我们鼠标悬浮在某个省时,需要显示该省的一些业务信息,这时,就需要用到formatter函数来自定义显示内容,如下:

tooltip:{
        			trigger:'item',
        			formatter:function(params,ticket,callback){
        				var hoverMessage = params.data;
        				//console.log(params);
        				//console.log(hoverMessage);
        				return '缴费总额:'+hoverMessage.value+'<br>'+'支付总额:'+hoverMessage.zhifu+'<br>'+'资产总净值:'+hoverMessage.jingzhi;
        			}
        		}

以上的是直接在前台写的死数据显示出来的东西,下面我贴一下我通过ajax从后台获取相关数据并显示的代码:

var echartsMap = echarts.init(document.getElementById("piccEchartsMap"));
//数据查询
$.ajax({
	url : '../../public.asp',
	type : 'post',
	data : {
		funcId : "tabulateDataMap",
	},
	dataType:'json',//接受数据格式 
	success : function(data) {
		if(data.err_code==""){
			var dataArr = [];//全部数据
			var bufenArr = [];//资产总净值数据
			for(var i=0;i<data.items.length;i++){
				var dataName = data.items[i].AccMngName.substr(0,2);
				var organizationName=data.items[i].AccMngName
				if(dataName=="中央"){
					dataName = '北京';
				}
				if(organizationName=="北京市社会保险经办机构1"){
					organizationName = '北京市社会保险经办机构';
				}
				if(dataName=="内蒙"){
					dataName = '内蒙古';
				}
				if(dataName=="黑龙"){
					dataName = '黑龙江';
				}
				bufenArr.push({//省份的数据
					name:dataName,
					value:data.items[i].Totalfundshare,
				})
				dataArr.push({//每个标记的数据
					name:dataName,
					accMngName:organizationName,
					value:data.items[i].Totalfundshare,
					beforeTaxMoney:data.items[i].BeforeTaxMoney,
					cashaMount:data.items[i].CashaMount,
					
				})
			}
			echartsMapFun(dataArr);//初始化地图
			echartsMap.setOption({//填入数据
				series : [{
				                name: 'categoryA',
				                type: 'map',
				                geoIndex: 0,
				                // tooltip: {show: false},
				                data:bufenArr
				            }]
			})
		}else{
			$.messager.alert('错误',data.err_message,'error');
		}
	},
	failure : function(data) {
		$.messager.alert('错误','初始化数据失败!','error');
	}
});

		var geoCoordMap = {//各省市机构经纬度
           '山东省社会保险经办机构':[120.38,37.35],
           '黑龙江省社会保险经办机构':[123.97,47.33],
           '宁夏回族自治区社会保险经办机构':[106.26667,38.46667],
           '甘肃省社会保险经办机构':[102.188043,38.520089],
           '福建省社会保险经办机构':[118.58,24.93],
           '西藏自治区社会保险经办机构':[91.11,29.97],
           '上海市社会保险经办机构':[121.48,31.22],
           '四川省社会保险经办机构':[101.718637,26.582347],
           '广东省社会保险经办机构':[113.23,23.16],
           '山西省社会保险经办机构':[112.53,37.87],
           '云南省社会保险经办机构':[102.73,25.04],
           '陕西省社会保险经办机构':[108.72,34.36],
           '海南省社会保险经办机构':[110.35,20.02],
           '辽宁省社会保险经办机构':[121.62,38.92],
           '辽宁省社会保险经办机构':[123.38,41.8],
           '吉林省社会保险经办机构':[125.35,43.88],
           '江西省社会保险经办机构':[115.89,28.68],
           '广西壮族自治区社会保险经办机构':[109.4,24.33],
           '青海省社会保险经办机构':[101.74,36.56],
           '内蒙古自治区社会保险经办机构':[111.65,40.82],
           '湖南省社会保险经办机构':[110.479191,29.117096],
           '重庆市社会保险经办机构':[106.54,29.59],
           '江苏省社会保险经办机构':[118.78,32.04],
           '贵州省社会保险经办机构':[106.71,26.57],
           '新疆维吾尔自治区社会保险经办机构':[84.77,45.59],
           '北京市社会保险经办机构':[116.46,39.92],
           '中央国家机关养老保险管理中心':[116.86,40.22],
           '新疆生产建设兵团社会保险经办机构':[87.68,43.77],
           '浙江省社会保险经办机构':[120.19,30.26],
           '天津市社会保险经办机构':[117.2,39.13],
           '河南省社会保险经办机构':[113.65,34.76],
           '河北省社会保险经办机构':[114.48,38.03],
           '湖南省社会保险经办机构':[113,28.21],
           '安徽省社会保险经办机构':[117.27,31.86],
           '湖北省社会保险经办机构':[114.31,30.52],
        };
        
function echartsMapFun(data){
	echartsMap.setOption({
		tooltip:{
			trigger:'item',
			formatter:function(params,ticket,callback){//自定义鼠标悬浮框内的数据内容与格式
				var hoverMessage = params.data;
				var paymentAmount = hoverMessage.beforeTaxMoney;//支付总额
				var totalNetAssetValue = hoverMessage.cashaMount;//缴费总额的值
				var totalPayment = hoverMessage.totalfundshare;//资产总净值
				//console.log(params);
				//console.log(hoverMessage);
				if(totalNetAssetValue==undefined||totalNetAssetValue==null&&paymentAmount==undefined||paymentAmount==null){
					return '';//使鼠标悬浮在省份上时不显示悬浮框内的信息
				}else{//鼠标悬浮在标记上时显示该省份的信息
					return '缴费总额:'+totalPayment+'<br>'+'支付总额:'+paymentAmount+'<br>'+'资产总净值:'+totalNetAssetValue;
			    }
				
			}
		},
        visualMap: {
            min: 0,
            max: 4500,
            left: 'left',
            top: 'bottom',
            inRange: {
                color: ['#e0ffff', '#006edd']
            },
            text: ['高','低'],           // 文本,默认为数值文本
            calculable: true
        },
        geo: {
            map: 'china',
            roam: true,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgb(0,0,0)'//地图上各省会颜色样式
                    }
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series : [
            {
            	type: 'scatter',//散点图类型
                name:'scatterMap',
                coordinateSystem: 'geo',
                data:scatterData(data),//加载标记的数据
                symbolSize: 20,//小标记的图片大小
	            symbol: 'image://../../css/images/address.png',//小标记的图片路径
	            symbolRotate: 5,//小标记的图片角度
	            label: {
	                   normal: {
	                       formatter: '{b}',
	                       position: 'right',
	                       color:'#000',//鼠标悬浮上标记时显示名称的颜色
	                       fontWeight:'bold',
	                       show: false
	                   },
	                   emphasis: {
	                       show: true
	                   }
	               },
	               itemStyle: {
	                   normal: {
	                        color: '#F06C00'
	                   }
	               }
            },
            {
                name: 'categoryA',
                type: 'map',
                geoIndex: 0,
                // tooltip: {show: false},
                data:[]
            }
        ]
    });
}
        

function scatterData(data){
	if(data==undefined||data==""||data==null){
		return false;
	}
	var dataItems = data;
	for(var j=0;j<dataItems.length;j++){
		dataItems[j]['totalfundshare']=dataItems[j]['value'];
		//增加一个新的属性totalfundshare,因为散点图标记的value值只能为该点的经纬度,不然标记会不显示
	}
	//console.log(dataItems);
	var res = [];//承载标记上的数据数组
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[dataItems[i].accMngName];
        var geoZhifu = dataItems[i].beforeTaxMoney;
        var geoJiaofei = dataItems[i].cashaMount;
        var geoJingzhi = dataItems[i].totalfundshare;
        if (geoCoord) {
            res.push({
                name: dataItems[i].accMngName,
                value: geoCoord.concat(),
                beforeTaxMoney:geoZhifu,
                cashaMount:geoJingzhi,
                totalfundshare:geoJiaofei,
            });
        }
    }
    console.log(res);
	return res;
}


最后附上china.js文件的下载地址:www.webmq.cn/echarts-master.zip

还有做echarts地图散点图的文章:http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html








©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页