echarts是一個強大的數據可視化工具，而該工具提供了許多數據展示方式，以及包含一些基本的geo地圖。

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

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

以上代碼展示了如何將中山市json數據導入echarts中，在echarts中注冊地圖，然后通過配置option來展示地圖。通過data可以控制地圖上每個區域相關數據的值，以便在用戶進行鼠標懸浮時，能夠很好地展示相關數據。