入门级echarts地图高亮 ♥
需求
我们需要在各个省的地图中对指定城市进行高亮，直辖市在中国地图中高亮。
实现
1. 首先导入echarts
npm install echarts
ECharts（Enterprise Charts）是一个由百度开发的开源图表库，它提供了丰富的交互性、可定制性和扩展性，用于创建各种类型的数据可视化图表。它内置了地图数据和渲染功能，使用户能够轻松创建各种类型的地图数据可视化。
2. 下载地图数据
下载链接 ： 中国地图数据
这里我们要以GeoJSON格式下载所有省份的地图数据。
如果嫌逐个省份下载麻烦，也可以去我的百度网盘下载 ： 网盘资源
下载完成后放入vue的public/province文件夹（自己创建）
3. 将地图封装为子组件，必须传入地图名称和高亮部分名称
<template>
<div>
<div ref="geoEcharts" class="geo-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'//用于请求地图信息
import { stringify } from 'qs'
export default {
name: "Geo",
props: {
highlightProvince: { //父组件传入高亮部分名称
type: String,
required: true
},
map_name: {//父组件传入地图名称
type: String,
required: true
}
},
data() {
return {
China_map:null,//存储地图信息
China_option:null,//地图配置信息
}
},
mounted(){
if( this.highlightProvince!=null)
this.initGeoEcharts();
},
methods: {
initGeoEcharts() {
//渲染地图部分
},
},
}
</script>
<style>
.geo-echart{
height: 400px;
width: 400px;
}
</style>
4. 地图渲染
根据传入的地图名称，获取public/province文件夹下的不同地图数据
initGeoEcharts() {
axios.get('/province/'+this.map_name+'.json').then(res => {
echarts.registerMap(this.map_name, res.data)
this.$nextTick(() => {
if(this.China_map==null)this.China_map = echarts.init(this.$refs['geoEcharts'], null, {renderer:'svg'})
this.China_option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
geo: {
map: this.map_name,
zoom: 1,
silent: true,//禁止鼠标点击
roam: false, // 禁止拖拽和缩放
selectedMode: 'none', // 选择高亮显示
itemStyle: {
areaColor: 'rgba(255,255,255,0.5)',
borderColor: '#02c0ff'
},
},
};
this.China_map.setOption(this.China_option);
if(this.highlightProvince!=null && this.highlightProvince!=""){
this.China_map.dispatchAction({
type: 'geoSelect',
geoIndex:0,
// geo 组件中 region 名称。
// 可以是一个数组指定多个名称。
name: this.highlightProvince,
});
}
});
});
},
5. 实时监测
当外部传入的地图数据改变时，地图显示也要随之变化
watch:{
highlightProvince(newhighlightProvince, oldhighlightProvince){
if(newhighlightProvince!=null)
this.initGeoEcharts();
}
},
6.销毁地图
地图要实时销毁，不然可能会很卡
beforeDestroy() {
this.disposeECharts();
},
methods: {
initGeoEcharts() {
//...
},
disposeECharts() {
if (this.China_map) {
// 销毁 ECharts 实例
this.China_map.dispose();
}
},
},
完整代码
父组件
<template>
<div>
<ChinaMap :highlightProvince="temp_address" :map_name="temp_map_name" class="map-wrapper" ></ChinaMap>
</div>
</template>
<script>
import ChinaMap from './test.vue'; // 导入子组件
export default {
components: {
ChinaMap // 注册子组件
},
data(){
return {
temp_address:"",
temp_map_name:"",
cityProvinceMap:null,
}
},
mounted(){
const cityProvincePairs = [//记录每个高亮部分和地图名称的哈希表
['北京市', 'china'],
['上海市', 'china'],
['天津市', 'china'],
['重庆市', 'china'],
['香港特别行政区', 'china'],
['澳门特别行政区', 'china'],
['台湾省', 'china'],
['石家庄', 'hebei'],
['唐山', 'hebei'],
['秦皇岛', 'hebei'],
['邯郸', 'hebei'],
['邢台', 'hebei'],
['保定', 'hebei'],
['张家口', 'hebei'],
['承德', 'hebei'],
['沧州', 'hebei'],
['廊坊', 'hebei'],
['衡水', 'hebei'],
['太原', 'shanxi'],
['大同', 'shanxi'],
['阳泉', 'shanxi'],
['长治', 'shanxi'],
['晋城', 'shanxi'],
['朔州', 'shanxi'],
['晋中', 'shanxi'],
['运城', 'shanxi'],
['忻州', 'shanxi'],
['临汾', 'shanxi'],
['吕梁', 'shanxi'],
['呼和浩特', 'neimenggu'],
['包头', 'neimenggu'],
['乌海', 'neimenggu'],
['赤峰', 'neimenggu'],
['通辽', 'neimenggu'],
['鄂尔多斯', 'neimenggu'],
['呼伦贝尔', 'neimenggu'],
['巴彦淖尔', 'neimenggu'],
['乌兰察布', 'neimenggu'],
['兴安盟', 'neimenggu'],
['锡林郭勒盟', 'neimenggu'],
['阿拉善盟', 'neimenggu'],
['沈阳', 'liaoning'],
['大连', 'liaoning'],
['鞍山', 'liaoning'],
['抚顺', 'liaoning'],
['本溪', 'liaoning'],
['丹东', 'liaoning'],
['锦州', 'liaoning'],
['营口', 'liaoning'],
['阜新', 'liaoning'],
['辽阳', 'liaoning'],
['盘锦', 'liaoning'],
['铁岭', 'liaoning'],
['朝阳', 'liaoning'],
['葫芦岛', 'liaoning'],
['长春', 'jilin'],
['吉林', 'jilin'],
['四平', 'jilin'],
['辽源', 'jilin'],
['通化', 'jilin'],
['白山', 'jilin'],
['松原', 'jilin'],
['白城', 'jilin'],
['延边朝鲜族自治州', 'jilin'],
['哈尔滨', 'heilongjiang'],
['齐齐哈尔', 'heilongjiang'],
['鸡西', 'heilongjiang'],
['鹤岗', 'heilongjiang'],
['双鸭山', 'heilongjiang'],
['大庆', 'heilongjiang'],
['伊春', 'heilongjiang'],
['佳木斯', 'heilongjiang'],
['七台河', 'heilongjiang'],
['牡丹江', 'heilongjiang'],
['黑河', 'heilongjiang'],
['绥化', 'heilongjiang'],
['大兴安岭地区', 'heilongjiang'],
['南京', 'jiangsu'],
['无锡', 'jiangsu'],
['徐州', 'jiangsu'],
['常州', 'jiangsu'],
['苏州', 'jiangsu'],
['南通', 'jiangsu'],
['连云港', 'jiangsu'],
['淮安', 'jiangsu'],
['盐城', 'jiangsu'],
['扬州', 'jiangsu'],
['镇江', 'jiangsu'],
['泰州', 'jiangsu'],
['宿迁', 'jiangsu'],
['杭州', 'zhejiang'],
['宁波', 'zhejiang'],
['温州', 'zhejiang'],
['嘉兴', 'zhejiang'],
['湖州', 'zhejiang'],
['绍兴', 'zhejiang'],
['金华', 'zhejiang'],
['衢州', 'zhejiang'],
['舟山', 'zhejiang'],
['台州', 'zhejiang'],
['丽水', 'zhejiang'],
['合肥', 'anhui'],
['芜湖', 'anhui'],
['蚌埠', 'anhui'],
['淮南', 'anhui'],
['马鞍山', 'anhui'],
['淮北', 'anhui'],
['铜陵', 'anhui'],
['安庆', 'anhui'],
['黄山', 'anhui'],
['滁州', 'anhui'],
['阜阳', 'anhui'],
['宿州', 'anhui'],
['六安', 'anhui'],
['亳州', 'anhui'],
['池州', 'anhui'],
['宣城', 'anhui'],
['福州', 'fujian'],
['厦门', 'fujian'],
['莆田', 'fujian'],
['三明', 'fujian'],
['泉州', 'fujian'],
['漳州', 'fujian'],
['南平', 'fujian'],
['龙岩', 'fujian'],
['宁德', 'fujian'],
['南昌', 'jiangxi'],
['景德镇', 'jiangxi'],
['萍乡', 'jiangxi'],
['九江', 'jiangxi'],
['新余', 'jiangxi'],
['鹰潭', 'jiangxi'],
['赣州', 'jiangxi'],
['吉安', 'jiangxi'],
['宜春', 'jiangxi'],
['抚州', 'jiangxi'],
['上饶', 'jiangxi'],
['济南', 'shandong'],
['青岛', 'shandong'],
['淄博', 'shandong'],
['枣庄', 'shandong'],
['东营', 'shandong'],
['烟台', 'shandong'],
['潍坊', 'shandong'],
['济宁', 'shandong'],
['泰安', 'shandong'],
['威海', 'shandong'],
['日照', 'shandong'],
['莱芜', 'shandong'],
['临沂', 'shandong'],
['德州', 'shandong'],
['聊城', 'shandong'],
['滨州', 'shandong'],
['菏泽', 'shandong'],
['郑州', 'henan'],
['开封', 'henan'],
['洛阳', 'henan'],
['平顶山', 'henan'],
['安阳', 'henan'],
['鹤壁', 'henan'],
['新乡', 'henan'],
['焦作', 'henan'],
['濮阳', 'henan'],
['许昌', 'henan'],
['漯河', 'henan'],
['三门峡', 'henan'],
['南阳', 'henan'],
['商丘', 'henan'],
['信阳', 'henan'],
['周口', 'henan'],
['驻马店', 'henan'],
['济源', 'henan'],
['武汉', 'hubei'],
['黄石', 'hubei'],
['十堰', 'hubei'],
['宜昌', 'hubei'],
['襄阳', 'hubei'],
['鄂州', 'hubei'],
['荆门', 'hubei'],
['孝感', 'hubei'],
['荆州', 'hubei'],
['黄冈', 'hubei'],
['咸宁', 'hubei'],
['随州', 'hubei'],
['恩施土家族苗族自治州', 'hubei'],
['仙桃', 'hubei'],
['潜江', 'hubei'],
['天门', 'hubei'],
['神农架林区', 'hubei'],
['长沙', 'hunan'],
['株洲', 'hunan'],
['湘潭', 'hunan'],
['衡阳', 'hunan'],
['邵阳', 'hunan'],
['岳阳', 'hunan'],
['常德', 'hunan'],
['张家界', 'hunan'],
['益阳', 'hunan'],
['郴州', 'hunan'],
['永州', 'hunan'],
['怀化', 'hunan'],
['娄底', 'hunan'],
['湘西土家族苗族自治州', 'hunan'],
['广州', 'guangdong'],
['韶关', 'guangdong'],
['深圳', 'guangdong'],
['珠海', 'guangdong'],
['汕头', 'guangdong'],
['佛山', 'guangdong'],
['江门', 'guangdong'],
['湛江', 'guangdong'],
['茂名', 'guangdong'],
['肇庆', 'guangdong'],
['惠州', 'guangdong'],
['梅州', 'guangdong'],
['汕尾', 'guangdong'],
['河源', 'guangdong'],
['阳江', 'guangdong'],
['清远', 'guangdong'],
['东莞', 'guangdong'],
['中山', 'guangdong'],
['潮州', 'guangdong'],
['揭阳', 'guangdong'],
['云浮', 'guangdong'],
['南宁', 'guangxi'],
['柳州', 'guangxi'],
['桂林', 'guangxi'],
['梧州', 'guangxi'],
['北海', 'guangxi'],
['防城港', 'guangxi'],
['钦州', 'guangxi'],
['贵港', 'guangxi'],
['玉林', 'guangxi'],
['百色', 'guangxi'],
['贺州', 'guangxi'],
['河池', 'guangxi'],
['来宾', 'guangxi'],
['崇左', 'guangxi'],
['海口', 'hainan'],
['三亚', 'hainan'],
['三沙', 'hainan'],
['儋州', 'hainan'],
['五指山', 'hainan'],
['琼海', 'hainan'],
['文昌', 'hainan'],
['万宁', 'hainan'],
['东方', 'hainan'],
['定安', 'hainan'],
['屯昌', 'hainan'],
['澄迈', 'hainan'],
['临高', 'hainan'],
['白沙黎族自治县', 'hainan'],
['昌江黎族自治县', 'hainan'],
['乐东黎族自治县', 'hainan'],
['陵水黎族自治县', 'hainan'],
['保亭黎族苗族自治县', 'hainan'],
['琼中黎族苗族自治县', 'hainan'],
['成都', 'sichuan'],
['自贡', 'sichuan'],
['攀枝花', 'sichuan'],
['泸州', 'sichuan'],
['德阳', 'sichuan'],
['绵阳', 'sichuan'],
['广元', 'sichuan'],
['遂宁', 'sichuan'],
['内江', 'sichuan'],
['乐山', 'sichuan'],
['南充', 'sichuan'],
['眉山', 'sichuan'],
['宜宾', 'sichuan'],
['广安', 'sichuan'],
['达州', 'sichuan'],
['雅安', 'sichuan'],
['巴中', 'sichuan'],
['资阳', 'sichuan'],
['阿坝藏族羌族自治州', 'sichuan'],
['甘孜藏族自治州', 'sichuan'],
['凉山彝族自治州', 'sichuan'],
['贵阳', 'guizhou'],
['六盘水', 'guizhou'],
['遵义', 'guizhou'],
['安顺', 'guizhou'],
['毕节', 'guizhou'],
['铜仁', 'guizhou'],
['黔西南布依族苗族自治州', 'guizhou'],
['黔东南苗族侗族自治州', 'guizhou'],
['黔南布依族苗族自治州', 'guizhou'],
['昆明', 'yunnan'],
['曲靖', 'yunnan'],
['玉溪', 'yunnan'],
['保山', 'yunnan'],
['昭通', 'yunnan'],
['丽江', 'yunnan'],
['普洱', 'yunnan'],
['临沧', 'yunnan'],
['楚雄', 'yunnan'],
['红河', 'yunnan'],
['文山', 'yunnan'],
['西双版纳', 'yunnan'],
['大理', 'yunnan'],
['德宏', 'yunnan'],
['怒江', 'yunnan'],
['迪庆', 'yunnan'],
['楚雄', 'yunnan'],
['红河', 'yunnan'],
['拉萨', 'xizang'],
['日喀则', 'xizang'],
['昌都', 'xizang'],
['林芝', 'xizang'],
['山南', 'xizang'],
['那曲', 'xizang'],
['阿里', 'xizang'],
//这是陕西
['西安', 'shanxi1'],
['铜川', 'shanxi1'],
['宝鸡', 'shanxi1'],
['咸阳', 'shanxi1'],
['渭南', 'shanxi1'],
['延安', 'shanxi1'],
['汉中', 'shanxi1'],
['榆林', 'shanxi1'],
['安康', 'shanxi1'],
['商洛', 'shanxi1'],
['兰州', 'gansu'],
['嘉峪关', 'gansu'],
['金昌', 'gansu'],
['白银', 'gansu'],
['天水', 'gansu'],
['武威', 'gansu'],
['张掖', 'gansu'],
['平凉', 'gansu'],
['酒泉', 'gansu'],
['庆阳', 'gansu'],
['定西', 'gansu'],
['陇南', 'gansu'],
['临夏回族自治州', 'gansu'],
['甘南藏族自治州', 'gansu'],
['西宁', 'qinghai'],
['海东', 'qinghai'],
['海北藏族自治州', 'qinghai'],
['黄南藏族自治州', 'qinghai'],
['海南藏族自治州', 'qinghai'],
['果洛藏族自治州', 'qinghai'],
['玉树藏族自治州', 'qinghai'],
['海西蒙古族藏族自治州', 'qinghai'],
['银川', 'ningxia'],
['石嘴山', 'ningxia'],
['吴忠', 'ningxia'],
['固原', 'ningxia'],
['中卫', 'ningxia'],
['乌鲁木齐', 'xinjiang'],
['克拉玛依', 'xinjiang'],
['吐鲁番', 'xinjiang'],
['哈密', 'xinjiang'],
['昌吉', 'xinjiang'],
['博尔塔拉', 'xinjiang'],
['巴音郭楞', 'xinjiang'],
['阿克苏', 'xinjiang'],
['克孜勒苏柯尔克孜', 'xinjiang'],
['喀什', 'xinjiang'],
['和田', 'xinjiang'],
['伊犁', 'xinjiang'],
['塔城', 'xinjiang'],
['阿勒泰', 'xinjiang'],
['石河子', 'xinjiang'],
['阿拉尔', 'xinjiang'],
['图木舒克', 'xinjiang'],
['五家渠', 'xinjiang'],
['北屯', 'xinjiang'],
['铁门关', 'xinjiang'],
['双河', 'xinjiang'],
['可克达拉', 'xinjiang'],
['昆玉', 'xinjiang'],
];
this.cityProvinceMap = new Map(cityProvincePairs);
// let res = (await getProjectInfo())
this.temp_address = "大同";//这里可以替换为动态从后端获取地址，但是要注意异步问题。
this.temp_map_name = this.cityProvinceMap.get(this.temp_address );
},
}
</script>
子组件 test.vue
<template>
<div>
<div ref="geoEcharts" class="geo-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
name: "Geo",
props: {
highlightProvince: { //父组件传入高亮部分名称
type: String,
required: true
},
map_name: {//父组件传入地图名称
type: String,
required: true
}
},
data() {
return {
China_map:null,
China_option:null,
}
},
mounted(){
if( this.highlightProvince!=null)
this.initGeoEcharts();
},
beforeDestroy() {
this.disposeECharts();
},
watch:{//实时监测高亮部分名称，一旦有变化就重新渲染地图
highlightProvince(newhighlightProvince, oldhighlightProvince){
if(newhighlightProvince!=null)
this.initGeoEcharts(); // 调用子组件的方法
}
},
methods: {
initGeoEcharts() {
axios.get('/province/'+this.map_name+'.json').then(res => {
echarts.registerMap(this.map_name, res.data)
this.$nextTick(() => {
if(this.China_map==null)this.China_map = echarts.init(this.$refs['geoEcharts'], null, {renderer:'svg'})
this.China_option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
geo: {
map: this.map_name,
zoom: 1,
silent: true,//禁止鼠标点击
roam: false, // 禁止拖拽和缩放
selectedMode: 'none', // 选择高亮显示
itemStyle: {
areaColor: 'rgba(255,255,255,0.5)',
borderColor: '#02c0ff'
},
},
};
this.China_map.setOption(this.China_option);
if(this.highlightProvince!=null && this.highlightProvince!=""){
this.China_map.dispatchAction({
type: 'geoSelect',
geoIndex:0,
// geo 组件中 region 名称。
// 可以是一个数组指定多个名称。
name: this.highlightProvince,
});
}
});
});
},
disposeECharts() {
if (this.China_map) {
// 销毁 ECharts 实例
this.China_map.dispose();
}
},
},
}
</script>
<style>
.geo-echart{
height: 400px;
width: 400px;
}
</style>