效果：
data数据
dataList: [{
name: '项目内容',
value: [120.256616, 30.239604, 100],
img: require('../assets/icon/beijing.png'),
content: '内容详情介绍内容详情介绍内容详情介绍',
info: {
icon: 'image://' + require('../assets/icon/dianwei.png'),
iconActive: 'image://' + require('../assets/icon/iconActive.png'),
},
isActive: false
}, {
name: '项目内容2',
value: [116.399957, 39.904752, 100],
img: require('../assets/icon/beijing.png'),
content: '内容详情介绍内容详情介绍内容详情介绍',
info: {
icon: 'image://' + require('../assets/icon/dianwei.png'),
iconActive: 'image://' + require('../assets/icon/iconActive.png'),
},
isActive: false
}, {
name: '项目内容3',
value: [112.464886, 34.622838, 100],
img: require('../assets/icon/beijing.png'),
content: '内容详情介绍内容详情介绍内容详情介绍',
info: {
icon: 'image://' + require('../assets/icon/dianwei.png'),
iconActive: 'image://' + require('../assets/icon/iconActive.png'),
},
isActive: false
}]地图配置项
let chinaJson = require('@/assets/json/china.json')
var chartDom = document.getElementById('mapBox');
this.myChart = echarts.init(chartDom);
echarts.registerMap("china", chinaJson)
let imgUrl = require('../assets/icon/tankuang.png')
var option;
option = {
tooltip: {
trigger: "item",
triggerOn: "click",
alwaysShowContent: true,
showDelay: 0, //浮层显示的延迟
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
enterable: true,
className: 'iconMap',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
formatter: function(params) {
if (params.data) {
let html = `
<div style="width:300px;height:185px;background: url(${imgUrl}) no-repeat;padding:20px 22px;position: relative;">
<div id="tooltipGB" style="position: absolute;width:30px;height:30px;right:15px;top:15px;"></div>
<div style="font-size: 18px;">${params.data.name}</div>
<div style="display:flex;margin-top:20px;height:100px;">
<div style="width:80px;height:80px;overflow: hidden;">
<img width="100%" height="auto" src="${params.data.img}" alt="">
</div>
<div style="padding-left:10px;width:170px;white-space:normal;font-size: 14px;font-weight: 400;">
${params.data.content}
</div>
</div>
</div>
`
return html;
} else {
return `<div style="background-color: rgba(4,24,51,0.5);padding:5px 10px;">${params.name}</div>`;
}
},
// position: ['50%', '50%'],
backgroundColor: "rgba(4,24,51,0)",
borderColor: 'rgba(99, 173, 222,0)',
borderWidth: 0,
padding: [0, 0],
textStyle: {
color: "#fff",
fontWeight: "bolder",
},
},
geo: {
map: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: '120%',
roam: false,
silent: true,
id:0,
label: {
show: false,
color: '#FFFFFF',
fontSize: 16
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 0.5,
color: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [{
offset: 0,
color: '#5ccbd1' // 0% 处的颜色
}, {
offset: 1,
color: '#5ccbd1' // 50% 处的颜色
}],
global: true // 缺省为 false
},
opacity: 0.8,
},
emphasis: {
disabled: true,
areaColor: '#d4e7e7',
label: {
show: false,
},
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
animationDurationUpdate: 0, //数据更新动画的时长。
z: 2
},
series: [{
type: 'map',
map: 'china',
roam: false,
selectedMode: false, //取消黄色高亮
tooltip: {
show: true
},
// label: {
// show: true,
// color: '#FFFFFF',
// fontSize: 16
// },
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '120%',
roam: true,
itemStyle: {
normal: {
areaColor: {
type: 'linear-gradient',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'RGBA(37,108,190,0.8)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(15,169,195,0.6)' // 50% 处的颜色
}],
global: true // 缺省为 false
},
borderColor: '#4ECEE6',
borderWidth: 1,
},
emphasis: {
areaColor: '#5fc4ef',
label: {
show: false,
color: '#FFFFFF',
fontSize: 16
},
}
},
animationDurationUpdate: 0, //数据更新动画的时长。
zlevel: 1
}, { //标记点图片
type: 'scatter',
coordinateSystem: "geo",
itemStyle: {
color: '#f00',
opacity: 1
},
// label: {
// show: true,
// color: '#FFFFFF',
// fontSize: 16
// },
symbol: function(value, params) {
// console.log(params.data)
if (params.data.isActive) {
return params.data.info.iconActive;
} else {
return params.data.info.icon;
}
},
// symbolSize: [46, 47],
symbolSize: [40, 50],
symbolOffset: [0, -25],
zlevel: 1,
data: this.dataList,
animationDurationUpdate: 0, //数据更新动画的时长。
}, ]
};
this.myChart.on("click", (event) => {
// console.log(event)
if (event.componentSubType === "scatter") {
set(event)
this.myChart.setOption(option);
let dom = document.getElementById('tooltipGB')
dom.onclick = () => {
let dom2 = document.getElementsByClassName('iconMap')
dom2[0].style.display = 'none'
set({name:''})
this.myChart.setOption(option);
}
}
// console.log(dom)
});
// 高亮
let set = (event)=>{
this.dataList.forEach((v, i) => {
if (v.name != event.name) {
if (v.isActive) {
v.isActive = false
}
} else {
v.isActive = true
}
})
}
//echarts 设置地图外边框以及多个geo实现缩放拖曳同步
this.myChart.on('georoam', (params) => {
var option = this.myChart.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else { //捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
// this.myChart.dispatchAction({ //来用程序主动渲染选框
// type: "restore",
// });
this.myChart.setOption(option); //设置option
});
option && this.myChart.setOption(option);