echarts是一個(gè)強(qiáng)大的數(shù)據(jù)可視化工具，而該工具提供了許多數(shù)據(jù)展示方式，以及包含一些基本的geo地圖。

其中關(guān)于geo地圖，則需要通過json數(shù)據(jù)進(jìn)行展示。下面就以中山市為例，來看如何使用echarts進(jìn)行地圖展示。

// 引入echarts
import echarts from 'echarts'
// 中山市json數(shù)據(jù)
import zhongshanJson from '../../static/json/zhongshan-json.json'
// 在echarts中注冊(cè)地圖
echarts.registerMap('zhongshan', zhongshanJson)
// 初始化echarts
const chart = echarts.init(document.getElementById('chart'))
// 配置option
const option = {
tooltip: {
trigger: 'item',
formatter: '
{c}'
},
series: [
{
name: '中山市',
type: 'map',
map: 'zhongshan',
label: {
show: true
},
data: [
{ name: '石岐區(qū)', value: 155 },
{ name: '東區(qū)', value: 92 },
{ name: '西區(qū)', value: 130 },
{ name: '南區(qū)', value: 60 },
{ name: '五桂山區(qū)', value: 40 },
{ name: '火炬開發(fā)區(qū)', value: 15 }
]
}
]
}
// 渲染echarts
chart.setOption(option)

以上代碼展示了如何將中山市json數(shù)據(jù)導(dǎo)入echarts中，在echarts中注冊(cè)地圖，然后通過配置option來展示地圖。通過data可以控制地圖上每個(gè)區(qū)域相關(guān)數(shù)據(jù)的值，以便在用戶進(jìn)行鼠標(biāo)懸浮時(shí)，能夠很好地展示相關(guān)數(shù)據(jù)。