echarts人口密度图全解

2024-04-03 19:49:40

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>