echarts加钓鱼岛赤尾屿（vue）（亲测有效）_echarts 显示 赤尾

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()
},
图例如下：
![alt](https://uploadfiles.nowcoder.com/images/20211030/920687331_1635579017653/151EF4220BCB37887540554004B36BAD)