echarts人口密度图全解

 

echarts人口密度图全解（echarts地图各配置项，tooltip标注显示多行信息，geojson数据包，地图增加自定义区域）

---

前言

第一次做人口密度图，遇到了很多坑，也百度了很多资料。记录一下。防止下次再掉坑里。效果展示如图：

1.echarts地图各配置项

echarts（https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label）官网都有各个图形的配置项。但是相对一个图形几百个配置项的去找，无异于大海捞针。我还是比较喜欢有针对性的改。根据需求来

html没啥好说的。引入jq和echarts的文件就行。这里图片的div一直要设置宽高。没有宽高图形是不会显示的，它不会自己撑起来。

<script src="./assets/js/echarts.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<div class="data2">
		<!-- 地图显示 -->
		<div id="map"></div>
</div>

 echarts图形核心数据就是options，配置项都在这。更多配置项可以去官网找，我这只描述我用到的几项。tooltip是标注显示，即鼠标放上去显示的弹窗信息，visualMap是地图旁边的色彩条，series里关键的属性center地区中心点，map地图geojso.json数据。data映射数据，也是从后端请求回来的数据渲染到地图上的数据。

<script type="text/javascript">
        var datas = [
            { name: '临海市', value: 119,grade:3.2 },
            { name: '仙居县', value: 9 , grade:3.2 },
			{ name: '天台县', value: 9 , grade:3.2},
			{ name: '三门县', value: 9 , grade:3.2},
			{ name: '黄岩区', value: 9 , grade:3.2},
			{ name: '椒江区', value: 9 , grade:3.2},
			{ name: '路桥区', value: 9 , grade:3.2},
			{ name: '温岭市', value: 9 , grade:3.2},
			{ name: '玉环市', value: 9 , grade:3.2},
        ];
        var options = {
            tooltip: {
                trigger: 'item',
				formatter:function(a,b){
					return (`区县：${a['name']}</br>实绩：${a['value']}</br>得分：${a['data'].grade}</br>`)
				}
            },
            visualMap: {
                min: 0,
                max: 250,
                right: '6%',
				bottom:'10%',
                text: ['高', '低'],
				textStyle:{color:'#01B2D5'},
                calculable: true,
                inRange: {
                    color: ['#28B0FE', '#1A65C9', '#112FA3']
                }
            },
            series: [
                { 
					label:{
					        show: true,
							color:'#FFFFFF',
					      },
					type: 'map',
					center: [121.42,28.66],
					map: 'china', 
					data: datas, 
					zoom: 8, 
					roam: true,
				}
            ]
        };

        var chart = echarts.init(document.getElementById('map'));
        $.getJSON(
            'https://cdn.huanggefan.cn/geojson/city/331000-%E5%8F%B0%E5%B7%9E%E5%B8%82.json',
            function (data) {
				console.log(data);
                echarts.registerMap('china', data);
                chart.setOption(options);
            }
        );
</script>

2.tooltip标注显示多行信息

参考：echarts图表tooltip显示多行信息

3.geojson数据包

包含中国，以及中国的所有省市，区县的geojson数据，下载地址：https://download.csdn.net/download/qq_34761385/15869875

如果不想下载，想用线上的，这里推荐一个地址：https://cdn.huanggefan.cn/

4.地图增加自定义区域

这个我没试过，看到（这位博主）说因为地图是来自genjson.json数据显示的效果，所以要增加区域就得修改genjson.json的数据。

自测吧，这里给大家推荐两个修改geojson文件的网址：

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5（国内。推荐）

http://geojson.io/