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()
},
圖例如下：
