Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦

最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同.

尝试之后,最后的渲染效果如下:(从图中可以看出,渲染的地图至少包含了三个数据集:行政地图块数据/黄色圈数据块/红色凸出预警块)

下面这种就是常见的单数据块行政区域地图渲染(明显可以看出,数据渲染的丰富性是不同的)

像这种两种地图在做的时候都是需要先加载到该地区的geo.json地图数据文件的,但是,两者又有所不同,前面更丰富的地图,他不仅需要行政区域数据,还需要个区域中心点坐标数据,绘点需要.接下来,以前图为例,分享下完成这种图的艰辛历程:

1 找轮子||资源寻找

开始做之前,第一下就想到了,网上有没有轮子,可以用,于是找了一堆,直到看到Echarts神器站点https://www.makeapie.com/ . 里面有丰富的绘图资源,大家可以去学习,开始看到了下面这个资源,感觉这个非常满足我的需求啊:(https://www.makeapie.com/editor.html?c=xBJDR584vG)

Echarts地图参考:

安徽省流向地图

中国人民大学2017年各省市计划录

上海数据分类统计情况

北京热点图

自定义地区级地图的实现

各区域数据下载站点:

DATAV.GeoAtlas

echarts 中uploadedDataURL 中的json数据下载 以及个省份地图json数据地址

echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载-行政区域地图】

其实这些地方数据渲染方法可能不同,所以数据集在用的时候需要灵活变动的,有些是用:

$.getJSON(uploadedDataURL-json数据文件, function(geoJson) {}

有些直接用:echarts.registerMap('XW',MapJson数据);

地图显示数据分级：

参考地址：https://www.cnblogs.com/shangrao/p/13198373.html

一些其他比较新颖的图:

花瓣

var scaleData = [{
        'name': '工程建设',
        'value': 10
    },
    {
        'name': '产权交易',
        'value': 10
    },
    {
        'name': '土地交易',
        'value': 30
    },
    {
        'name': '其他交易',
        'value': 10
    },
    {
        'name': '土地交易',
        'value': 10
    },
    {
        'name': '其他交易',
        'value': 10
    },
];
// 随机颜色
var rich = {
    white: {
        color: '#ddd',
        align: 'center',
        padding: [3, 0]
    }
};
var placeHolderStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: 'rgba(0, 0, 0, 0)',
        borderColor: 'rgba(0, 0, 0, 0)',
        borderWidth: 0
    }
};
function bg2(){
        return '#'+Math.floor(Math.random()*0xffffff).toString(16);
    }
	
	function rancolors(len){
		var color=[];
		for (var i = 0; i <= len; i++) {
			var sjys=bg2();
			color.push(sjys);
			for (var i = 0; i < color.length; i++) {
				if(color[i]=sjys){
					color[i]=bg2();
				}
			}
		}
		 return color;
	}
var data = [];
var color=rancolors(7)
for (var i = 0; i < scaleData.length; i++) {
    data.push({
        value: scaleData[i].value,
        name: scaleData[i].name,
        itemStyle: {
            normal: {
                borderWidth: 50,
                shadowBlur: 100,
                borderColor:color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 50,
        name: '',
        itemStyle: placeHolderStyle
    });
}
var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [100, 200],
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < scaleData.length; i++) {
                        total += scaleData[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if(params.name !== '') {
                        return params.name + '\n{white|' + '占比' + percent + '%}';
                    }else {
                        return '';
                    }
                },
                rich: rich
            },
            labelLine: {
                length:30,
                length2:100,
                show: true,
                color:'#00ffff'
            }
        }
    },
    data: data
}];
option = {
    backgroundColor: '#04243E',
    
    tooltip: {
        show: false
    },
    legend: {
        show: false
    },
    toolbox: {
        show: false
    },
    series: seriesObj
}

Echarts