1.首先引入json文件,node_modules/echarts中就有 import chinaData from "../../node_modules/echarts/map/json/china.json" 2.初始化地图,在初始化地图的时候加入钓鱼岛和赤尾屿的数据,在chinaData下的features中加入即可,
```initMap(){chinaData.features.push({ "id": "830000", "geometry": { "type": "Polygon", "coordinates": ["@@@@B@@@@@@@B@@@B@@@@@@@BA@@@@B@@@@@@@BA@@@@B@@@@@B@@@@@B@@@@@@@B@@@B@@@@@B@@@@@@@BA@@@@B@@A@@B@@@@A@@B@@@@@B@@A@@@@BA@@@@B@@A@@@A@@A@@A@@A@@@@@A@@A@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@B@@@@AA@@@@A@@@@B@AA@@@@@AA@@@A@BA@@@@A@@A@BAA@@B@@A@@@@@@@@@A@@A@@@@A@@AA@@@@@A@@@@AA@@@@@A@@@A@@@@A@@A@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@@A@@@@B@@@@@BA@@@@@@@@B@@@@@BA@@@@@@B@@B@@B@@@@@B@@@@B@@@@B@@@@@B@@B@@B@@@@B@@@@BB@@@BB@@@@B@@B@@B@@@BB@@@@B@@@@@B@@@@BB@@@@@B@@@@B@A@B@@B@@@@@B@@@@@B@@B@@@@B@@A@@BB@@"], "encodeOffsets": [ [126439, 26370] ] }, "properties": { "cp": [123.476492, 25.744676], "name": "钓鱼岛", "childNum": 1 }},{ "id": "830000", "geometry": { "type": "Polygon", "coordinates": ["@@@@B@@@@@@@B@@@B@@@@@@@BA@@@@B@@@@@@@BA@@@@B@@@@@B@@@@@B@@@@@@@B@@@B@@@@@B@@@@@@@BA@@@@B@@A@@B@@@@A@@B@@@@@B@@A@@@@BA@@@@B@@A@@@A@@A@@A@@A@@@@@A@@A@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@B@@@@AA@@@@A@@@@B@AA@@@@@AA@@@A@BA@@@@A@@A@BAA@@B@@A@@@@@@@@@A@@A@@@@A@@AA@@@@@A@@@@AA@@@@@A@@@A@@@@A@@A@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@@A@@@@B@@@@@BA@@@@@@@@B@@@@@BA@@@@@@B@@B@@B@@@@@B@@@@B@@@@B@@@@@B@@B@@B@@@@B@@@@BB@@@BB@@@@B@@B@@B@@@BB@@@@B@@@@@B@@@@BB@@@@@B@@@@B@A@B@@B@@@@@B@@@@@B@@B@@@@B@@A@@BB@@"], "encodeOffsets": [ [126439, 26370] ] }, "properties": { "cp": [124.33, 25.55], "name": "赤尾屿", "childNum": 1 }})let chart = this.$echarts.init(document.getElementById("map"));this.$echarts.registerMap('china', chinaData);let mapName='china'let option = {visualMap: {show: false,type: 'piecewise',left: 'left',top: 'bottom',orient: 'vertical',calculable: false,showLabel: false,inRange: {color: ['#82c96e', '#FFD700', '#fc4836'],}},geo: {show: true,layoutCenter: ['50%', '50%'],layoutSize: '120%',map: mapName,label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {normal: {areaColor: '#ffffff',borderColor: '#3B5077',},emphasis: {areaColor: '#ff945c',}}},series: [{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: false,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: [{"name":"福建","value":10},{"name":"西藏","value":10},{"name":"贵州","value":10},{"name":"上海","value":10},{"name":"广东","value":10},{"name":"湖北","value":10},{"name":"湖南","value":10},{"name":"安徽","value":10},{"name":"四川","value":10},{"name":"新疆","value":10},{"name":"江苏","value":10},{"name":"吉林","value":10},{"name":"宁夏","value":10},{"name":"全国","value":10},{"name":"河北","value":10},{"name":"河南","value":10},{"name":"广西","value":10},{"name":"海南","value":10},{"name":"江西","value":10},{"name":"重庆","value":10},{"name":"云南","value":10},{"name":"北京","value":10},{"name":"甘肃","value":10},{"name":"山东","value":10},{"name":"陕西","value":10},{"name":"浙江","value":10},{"name":"内蒙古","value":10},{"name":"青海","value":10},{"name":"辽宁","value":10},{"name":"天津","value":10},{"name":"黑龙江","value":10},{"name":"山西","value":10},{"name":"台湾","value":10}]},]};chart.setOption(option,true);chart.on('mouseover', (param) => {if(param.data == null || param.data.name ==null){return;}console.log(param)});},
3.再在页面上定义即可,contact-map样式中定义宽高。
<div id="map" class="contact-map"></div>
4.mounted中初始化即可
mounted(){this.initMap()
},
图例如下:
