部分代码
# 参数设置
lineOptions: {
backgroundColor: 'transparent',
title: {
text: this.title,
left: 'center',
top: "5",
textStyle: {
color: '#333',
fontSize: '20'
}
},
geo: {
map: 'worldAndChina', // china/world
center: [xxx,xxxx], // 视角中心点,经纬度
zoom: 5, // 当前视角缩放比例, china:1;world:3,
roam: true,
silent: true,
top: "top",
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#ACBDEF99',
borderColor: '#fff'
},
emphasis: {
areaColor: '#ACBDEF',
}
},
},
grid: {
containLabel: true,
left: "10",
right: "10%",
bottom: "10"
},
toolbox: {
feature: {
restore: {
icon:
"path://M744.825185 959.604364c99.432617-180.095751 116.152417-454.878025-274.385231-445.671339l0 221.86404L134.765845 400.102491 470.439954 64.394612l0 217.134319C938.120562 269.358751 990.225267 694.347025 744.825185 959.604364L744.825185 959.604364 744.825185 959.604364zM744.825185 959.604364"
},
saveAsImage: {},
}
},
tooltip: {
triggerOn: 'mousemove',
confine: true, // 是否限制在图表区域
extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
backgroundColor: "#dde4ed",
padding: 10,
textStyle: {
color: "#000"
},
position:"right",
},
series: []
},
## 渲染绘制
let echartsBox = document.getElementById("echartsMap");
let myChart = window.echarts.init(echartsBox);
myChart.showLoading({
text: "数据加载中 请稍后...",
textStyle: {
fontSize: 20
}
});
metricData= [{
name: el,
value: el.prop_lon_lat, // 此处为经纬度
}]
// 填充数据
let echartsOptions = this.lineOptions
echartsOptions.series.push({
type: 'effectScatter',
name: 'test',
coordinateSystem: 'geo',
symbol: "circle", // 标记的图形
symbolSize: 7,
showEffectOn: 'render',
data: metricData,
itemStyle: {
color: "#00a65a",
},
}),
myChart.clear();
this.$nextTick(() => {
myChart.setOption(echartsOptions, true);
this.pointClick(myChart);
// 监听地图缩放事件,
// 由于缩小地图的时候,地图文字存在堆在一起的情况,故判断zoom,控制label的展示和消失
// 该部分参考:https://juejin.im/post/5dca2e5b5188255719075f64
myChart.on('georoam', (params) => {
//获取最新的option配制
const { center, zoom } = myChart.getOption().geo[0];
echartsOptions.geo.zoom = zoom;
echartsOptions.geo.center = center;
if(zoom<3 && this.mapIsLarge){
echartsOptions.geo.label.normal.show = false;
myChart.setOption(echartsOptions, true);
this.mapIsLarge = false;
}else if(zoom>=3 && !this.mapIsLarge){
echartsOptions.geo.label.normal.show = true;
myChart.setOption(echartsOptions, true);
this.mapIsLarge = true;
}
});
});
截图