Echarts是一個基于JavaScript的數(shù)據(jù)可視化庫，它能夠讓我們輕松地創(chuàng)建豐富的可視化圖表。其中，echarts-2.x中加入了對geo地圖的支持，可以通過傳入中國省級行政區(qū)劃的GeoJSON數(shù)據(jù)來展示地圖。

// 引入echarts庫
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
// 使用江蘇省GeoJSON數(shù)據(jù)
$.getJSON('jiangsu.json', function(data) {
// 初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 配置echarts選項
var option = {
tooltip: {
trigger: 'item'
},
series: [{
name: '江蘇省地圖',
type: 'map',
mapType: '江蘇',
selectedMode: 'single',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [{
// 省級行政單位名稱
name: '南京市',
// 值，用于給地圖上不同區(qū)域著色
value: 82.44
},{
// 省級行政單位名稱
name: '蘇州市',
// 值，用于給地圖上不同區(qū)域著色
value: 91.6
}]
}]
};
// 將配置項設(shè)置到echarts實例上
myChart.setOption(option);
});

如上代碼所示，我們通過jQuery的getJSON方法獲取了江蘇省的GeoJSON數(shù)據(jù)，然后將其用于創(chuàng)建地圖。在配置echarts選項中，我們設(shè)置了mapType為“江蘇”，將選項應(yīng)用到echarts實例中。最終，我們就可以通過調(diào)用setOption方法將地圖呈現(xiàn)出來。