因爲項目只需要展示單獨省份的城市，而目前Echarts官網已不再提供地圖下載功能。
詳細見：EChartsMap ECharts地圖下載
但是可以從ECharts安裝包中找到矢量地圖數據，文件路徑 node_modules\echarts\map\json
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Echarts Map</title>
<style>
#app{
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script>
axios.get('/province/jiangsu.json').then((data) => {
echarts.registerMap('jiangsu', data.data)
let chart = echarts.init(document.getElementById('app'))
/*
// 這種方式可以自定義地圖樣式
chart.setOption({
geo: {
map: 'jiangsu',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
});
*/
// 這種方式可以顯示城市名稱
chart.setOption({
series: [{
type: 'map',
map: 'jiangsu'
}]
})
})
</script>
</body>
</html>