需要安装依赖
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
html
//w:100%,h:100%
<div id="main"></div>
js
import * as echarts from 'echarts'
async initMap() {
let res = await this.http.getStatic2('./assets/json/city.json');
if (res) {
let optionObj: any = {
animation: false,
geo: [{
map: 'JS',
zlevel: 5,
roam: true,
zoom: 1.2,
label: {
show: true,
color: '#fff',
fontSize: '14',
fontWeight: 'bold'
},
itemStyle: {
color: 'rgba(6,60,115,0.70)', // 背景
borderWidth: '2', // 边框宽度
borderColor: '#96ddff', // 边框颜色
},
emphasis: { //高亮的显示设置
label: {
color: "#fff",
},
itemStyle: {
areaColor: "#9DE3FF",
},
},
},
{
map: 'JS',
top: '12%',
zlevel: 3,
roam: true,
zoom: 1.2,
itemStyle: {
color: 'rgba(88,173,204,.1)', // 背景
borderWidth: '2', // 边框宽度
borderColor: 'rgba(88,173,204,.5)', // 边框颜色
shadowColor: 'rgba(88,173,204,.4)', // 外部阴影
shadowBlur: '30'
}
},
],
}
let chart = echarts.init(document.getElementById('main'));
echarts.registerMap('JS', res);
chart.setOption(optionObj)
chart.on('georoam', function (params: any) {
var option: any = chart.getOption();//获得option对象
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
option.geo[1].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
} else {//捕捉到拖曳时
option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
}
chart.setOption(option);//设置option
});
}
}
``
