?

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/

?

?

總結

以上是生活随笔為你收集整理的echarts人口密度图全解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。