因为项目只需要展示单独省份的城市,而目前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>