?

echarts人口密度圖全解（echarts地圖各配置項(xiàng)，tooltip標(biāo)注顯示多行信息，geojson數(shù)據(jù)包，地圖增加自定義區(qū)域）

---

前言

第一次做人口密度圖，遇到了很多坑，也百度了很多資料。記錄一下。防止下次再掉坑里。效果展示如圖：

1.echarts地圖各配置項(xiàng)

echarts（https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label）官網(wǎng)都有各個(gè)圖形的配置項(xiàng)。但是相對(duì)一個(gè)圖形幾百個(gè)配置項(xiàng)的去找，無(wú)異于大海撈針。我還是比較喜歡有針對(duì)性的改。根據(jù)需求來(lái)

html沒(méi)啥好說(shuō)的。引入jq和echarts的文件就行。這里圖片的div一直要設(shè)置寬高。沒(méi)有寬高圖形是不會(huì)顯示的，它不會(huì)自己撐起來(lái)。

<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圖形核心數(shù)據(jù)就是options，配置項(xiàng)都在這。更多配置項(xiàng)可以去官網(wǎng)找，我這只描述我用到的幾項(xiàng)。tooltip是標(biāo)注顯示，即鼠標(biāo)放上去顯示的彈窗信息，visualMap是地圖旁邊的色彩條，series里關(guān)鍵的屬性center地區(qū)中心點(diǎn)，map地圖geojso.json數(shù)據(jù)。data映射數(shù)據(jù)，也是從后端請(qǐng)求回來(lái)的數(shù)據(jù)渲染到地圖上的數(shù)據(jù)。

<script type="text/javascript">var datas = [{ name: '臨海市', value: 119,grade:3.2 },{ name: '仙居縣', value: 9 , grade:3.2 },{ name: '天臺(tái)縣', value: 9 , grade:3.2},{ name: '三門縣', value: 9 , grade:3.2},{ name: '黃巖區(qū)', value: 9 , grade:3.2},{ name: '椒江區(qū)', value: 9 , grade:3.2},{ name: '路橋區(qū)', value: 9 , grade:3.2},{ name: '溫嶺市', value: 9 , grade:3.2},{ name: '玉環(huán)市', value: 9 , grade:3.2},];var options = {tooltip: {trigger: 'item',formatter:function(a,b){return (`區(qū)縣：${a['name']}</br>實(shí)績(jī)：${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標(biāo)注顯示多行信息

參考：echarts圖表tooltip顯示多行信息

3.geojson數(shù)據(jù)包

包含中國(guó)，以及中國(guó)的所有省市，區(qū)縣的geojson數(shù)據(jù)，下載地址：https://download.csdn.net/download/qq_34761385/15869875

如果不想下載，想用線上的，這里推薦一個(gè)地址：https://cdn.huanggefan.cn/

4.地圖增加自定義區(qū)域

這個(gè)我沒(méi)試過(guò)，看到（這位博主）說(shuō)因?yàn)榈貓D是來(lái)自genjson.json數(shù)據(jù)顯示的效果，所以要增加區(qū)域就得修改genjson.json的數(shù)據(jù)。

自測(cè)吧，這里給大家推薦兩個(gè)修改geojson文件的網(wǎng)址：

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5（國(guó)內(nèi)。推薦）

http://geojson.io/

?

?

總結(jié)

以上是生活随笔為你收集整理的echarts人口密度图全解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。