返回
Echarts制作一个固定标记点的中国地图!再也不用在浏览器找地图了
前端
2024-01-25 17:46:48
绘制中国地图
下载中国地图文件,将map.json文件放入项目中;
引用地图文件:
import chinaJson from "china.json";
实例化echarts对象,设置地图类型为中国,使用刚才的map.json文件,支持缩放功能,禁止滚轮缩放;
var chinaChart = echarts.init(document.getElementById("main"), 'walden');
chinaChart.setOption({
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
data: chinaJson,
roam: true,
zoom: 1,
scaleLimit: {
min: 1,
max: 5
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
});
固定标记点
var markPointData = [{
name: '上海',
value: 31.2,
symbol: 'diamond',
symbolSize: 10,
tooltip: {
show: true
}
}];
// 绘制固定标记点
chinaChart.setOption({
series: [{
name: '标记点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: 20,
label: {
show: true,
position: 'top',
formatter: '{b}'
},
itemStyle: {
color: 'orange'
},
emphasis: {
label: {
show: true
}
},
data: markPointData
}]
});