今年来 数据可视化的需求变得越来越多
而地图在某些时候可能会更加直观 接下来就带大家
写一个简单的地图 最后会有gitee链接附上
一 html结构
<div style="position: relative">
<div id="mapNew"></div>
</div>
二 css样式
#mapNew {
width: 454px;
height: 389px;
background-color: pink;
}
三 js重点部分
首先我们地图是通过echarts来展示的 我这里说的是数据展示这一块
在echarts渲染地图有一个mapType需要指定
当然你可以指定“china”“上海”啊这些echart预置的
我这里主要说说自定义的
代码部分：
$.get("/sichuan.json", function (res) {
echarts.registerMap('sichuan', res);// 注册四川地图 注册后 可以在mapType哪里使用
let data =
[
{
"name": "蒲江库290吨",
"coord": [
"103.512570",
"30.202500"
]
},
{
"name": "青白江库1073.5吨",
"coord": [
"104.257508",
"30.884415"
]
},
{
"name": "大邑库30吨",
"coord": [
"103.527527",
"30.593149"
]
},
{
"name": "自贡库43吨",
"coord": [
"104.779307",
"29.339240"
]
},
{
"name": "广元库125吨",
"coord": [
"105.850419",
"32.441611"
]
},
{
"name": "资阳库0吨",
"coord": [
"104.634437",
"30.134956"
]
}
]
let series = [
{
type: 'map',
mapType: 'sichuan', // 地图类型，这里使用中国地图
animationDurationUpdate: 0,
aspectScale: 0.7,
center: data[2].coord,
zoom: 1.2,
top: 10,
data: [
// 地图数据，例如：广东省的数据
{name: '成都市', value: 100}
// ... 其他省份数据
],
tooltip: {
show: false
},
markPoint: {
symbol: 'circle', // 标记点形状 circle 圆形
symbolSize: 10, // 标记点大小
tooltip: {
show: false
},
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
color: '#F08D7E',
fontSize: 13,
fontWeight: 600,
fontFamily: "PingFang SC",
formatter: function (params) {
return params.data.name
},
},
color: '#ffffff',
borderColor: '#F08D7E',
borderWidth: 2
},
},
data: data
},
}
// 线的样式
]
let option = {
geo: [
{
map: 'sichuan',
aspectScale: 0.7,
zoom: 1.2,
top: 10,
center: data[2].coord,
animationDurationUpdate: 0,
roam: true,
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 12,
}
},
z: 5,//!*********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
itemStyle: {
areaColor: '#6899FF',//!****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
borderColor: '#ffffff',
borderWidth: 1,
shadowColor: '#6496fd',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
// 鼠标放上去后，样式改变
emphasis: {
// 图形的描边颜色
borderColor: '#fff',
borderWidth: '1',
// 阴影色
areaColor: '#548afa',
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 10,
},
}
},
},
tooltip: {
show: false
},
},
{
map: 'sichuan',
aspectScale: 0.7,
center: data[2].coord,
zoom: 1.2,
top: 10,
animationDurationUpdate: 0,
roam: true,
z: 4,//变小，也就是被压在下面
itemStyle: {
areaColor: '#6899FF',//记得改颜色
borderColor: '#ffffff',
borderWidth: 1,
shadowColor: '#6496fd',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
},
{
map: 'sichuan',
aspectScale: 0.7,
animationDurationUpdate: 0,
zoom: 1.2,
top: 10,
center: data[2].coord,
roam: true,
z: 4,//变小，也就是被压在下面
itemStyle: {
areaColor: '#6899FF',//记得改颜色
borderColor: '#ffffff',
borderWidth: 1,
shadowColor: '#6496fd',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
},
],
series: series
}
myChartMap = echarts.init(document.getElementById('mapNew'));//获取id
myChartMap.setOption(option);
myChartMap.on('georoam', (params) => {
let option = myChartMap.getOption();//获得option对象
let markPoint = myChartMap.getOption().series[0];
let len = option.geo.length;
if (params.zoom != null) { //捕捉到缩放时
for (var i = 0; i < len; i++) {
option.geo[i].center = option.geo[0].center;
option.geo[i].zoom = option.geo[0].zoom;
}
markPoint.center = option.geo[0].center;
markPoint.zoom = option.geo[0].zoom;
} else {//捕捉到拖曳时
for (var i = 0; i < len; i++) {
option.geo[i].center = option.geo[0].center;
}
markPoint.center = option.geo[0].center;
}
myChartMap.setOption(option);//设置option
myChartMap.setOption({
series: [markPoint]
});
})
最后也是附上效果图
以及源码地址：https://gitee.com/lymyself5926/echarts-map