Echarts 是一個(gè)基于 JavaScript 的可視化庫(kù),提供了多種圖表類(lèi)型來(lái)展示數(shù)據(jù)。其中,geo json 是 Echarts 中的一種地理信息格式,用于展示地理位置相關(guān)的數(shù)據(jù)。
使用 Echarts 中的 geo json,需要先構(gòu)建數(shù)據(jù)結(jié)構(gòu)。下面是一個(gè)基本的 geo json 數(shù)據(jù)結(jié)構(gòu):
var geoJson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [126.994157, 37.565492] }, "properties": { "name": "Seoul" } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [126.996146, 37.563703], [126.996146, 37.567281], [127.001628, 37.567281], [127.001628, 37.563703], [126.996146, 37.563703] ] ] }, "properties": { "name": "Seoul" } } ] };
以上是包含了一個(gè)點(diǎn)和一個(gè)多邊形的 geo json 數(shù)據(jù)結(jié)構(gòu)。其中,"type": "FeatureCollection"
表示這是一個(gè) Feature 集合,"type": "Feature"
表示每個(gè) Feature 對(duì)象包含了對(duì)象的幾何信息和屬性信息。
在 Echarts 中使用 geo json,可以通過(guò)將數(shù)據(jù)結(jié)構(gòu)中的 features 屬性傳入地圖系列的 data 中來(lái)展示地理信息。下面是一個(gè)簡(jiǎn)單的示例:
// 初始化地圖實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 使用 geo json 數(shù)據(jù)構(gòu)建地圖 myChart.setOption({ series: [{ type: 'map', map: 'china', data: geoJson.features }] });
上面示例中,我們傳入 data 時(shí),只傳入了 features。這是因?yàn)?Echarts 會(huì)根據(jù) geo json 數(shù)據(jù)進(jìn)行自動(dòng)匹配,自動(dòng)識(shí)別出 Feature 的幾何類(lèi)型并進(jìn)行渲染。
綜上所述,Echarts 中的 geo json 是一種方便的地理信息展示格式。只需要簡(jiǎn)單的構(gòu)建數(shù)據(jù)結(jié)構(gòu)和傳入?yún)?shù)即可展示地圖數(shù)據(jù)。