echarts是一款基于JavaScript的數(shù)據(jù)可視化庫(kù)，通過(guò)簡(jiǎn)單的配置就可以實(shí)現(xiàn)復(fù)雜的圖表展示效果。其中地圖圖表展示是它的重要功能之一。而在地圖功能中，JSON數(shù)據(jù)是不可或缺的。本文就來(lái)介紹一下如何使用echarts的JSON數(shù)據(jù)完成地圖展示。

首先需要準(zhǔn)備一個(gè)JSON數(shù)據(jù)，例如下面的示例：

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
116.407394,
39.904211
]
},
"properties": {
"name": "北京市"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
121.473701,
31.230416
]
},
"properties": {
"name": "上海市"
}
}
]
}

可以看到這個(gè)JSON數(shù)據(jù)包含了兩個(gè)點(diǎn)的經(jīng)緯度以及所在城市的名稱，在echarts地圖的展示中可以將這兩個(gè)點(diǎn)標(biāo)記在地圖上。

接下來(lái)是echarts展示地圖的代碼：

const chart = echarts.init(document.getElementById('map'));
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
type: 'map',
map: 'china'
},
{
type: 'scatter',
coordinateSystem: 'geo',
data: [
{
name: '北京市',
value: [116.407394, 39.904211]
},
{
name: '上海市',
value: [121.473701, 31.230416]
}
]
}
]
};
chart.setOption(option);

在代碼中，首先通過(guò)echarts.init方法獲取到將要顯示地圖的DOM元素，然后構(gòu)建地圖展示的option配置對(duì)象，包含一個(gè)type為map的series，以及一個(gè)type為scatter的series。其中type為map的series為展示的地圖，通過(guò)map屬性指定展示哪個(gè)地圖，這里使用的是echarts提供的china地圖；type為scatter的series用于在地圖上標(biāo)記點(diǎn)，通過(guò)data屬性傳入數(shù)據(jù)，通過(guò)value屬性指定點(diǎn)的經(jīng)緯度坐標(biāo)，在代碼中就是使用了之前準(zhǔn)備的JSON數(shù)據(jù)。

通過(guò)以上代碼和JSON數(shù)據(jù)，就可以完成echarts地圖展示的功能了！