echarts加钓鱼岛赤尾屿（vue）
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()
},
图例如下：
