聊聊Echarts如何引入国家、省市级地图，之说引入具体的数据展示和效果看echarts文档
一、中国地图
<template>
<div class="about">
<div ref="map" style="width:1200px;height:800px;"></div>
</div>
</template>
<script>
import echarts from 'echarts' //4.9.0
import 'echarts/map/js/china'
export default {
data() {
return{
}
},
mounted(){
this.init()
},
methods:{
init(){
//初始化echarts实例
var myChart = echarts.init(this.$refs.map)
//指定图表配置项及数据
var option ={
title:{
text:'中国地图'
},
series:[{
type:'map',
map:'china'
}]
}
//使用刚指定的配置项及数据
myChart.setOption(option);
}
},
}
</script>china的json文件是echarts自带的，直接引入即可
只需要在series -> map 里面定义'china'
这是页面中的中国地图：
二、省市级地图
省市级echarts无自带的json文件，需要去这里引入。http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=22.65267050733856&lng=114.18983459472656&zoom=10
如果直接调用json api的话看文档，如果没记错有个geo可以引入json api。
本地演示的话我就直接将完整的json文件复制到本地文档了，再引入项目。
<template>
<div class="about">
<div ref="map" style="width:1200px;height:800px;"></div>
</div>
</template>
<script>
import echarts from 'echarts' //4.9.0
import gzMap from '@/assets/gz'
export default {
data() {
return{
}
},
mounted(){
this.init()
},
methods:{
init(){
//初始化echarts实例
var myChart = echarts.init(this.$refs.map)
//注入这个表
echarts.registerMap('guangzhou', gzMap);
//指定图表配置项及数据
var option ={
title:{
text:'广州地图'
},
series:[{
type:'map',
map:'guangzhou'
}]
}
//使用刚指定的配置项及数据
myChart.setOption(option);
}
},
}
</script>这是广州市的市级地图，其实省级同理，可以去尝试一下
关于具体的样式调整，地区显示什么的可以去看官方文档，创作不易，感谢支持