主要实现功能:使用echarts+Amap 实现地图下钻并且带有散点图。
效果:
-
在项目文件中引入
import echarts from 'echarts'
; -
在index.html文件中引入高德地图:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.DistrictSearch"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
去高德地图注册并生成自己的key,调用高德地图的接口是有调用次数限制的,次数太多会收费,在使用的时候要注意。高德地图传送门
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=97e17a5e76b498925b1b181dc9691168&plugin=AMap.DistrictSearch"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
主要代码在sctterMap.vue
中。
sctterMap.vue:
<!-- sctterMap.vue 地图下钻并且带有散点图 -->
<template>
<div class="wrapper">
<div class="echarts" ref="chartMap"></div>
<p class="back" @click.stop="backTop">返回</p>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'dotMap',
data() {
return {
myCharts: null,
map: {},
parentJson: [],
geoJsonData: {},
mapData: [],
parentCode: [100000]
}
},
mounted() {
this.getGeoJson(100000)
},
methods: {
//获取geoJson数据
getGeoJson(adcode) {
this.map = new window.AMap.Map('map', {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
})
let that = this
window.AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => { //高德地图的行政区划查询
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: this.map
}))
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
console.error(error)
return
}
let Json = areaNode.getSubFeatures()
if (Json.length > 0 && Json[0].properties.level == 'district') {
that.parentJson = Json
} else if (Json.length == 0) {
Json = that.parentJson.filter(item => {
if (item.properties.adcode == adcode) {
return item
}
})
}
that.geoJsonData = {
features: Json
}
that.getMapData()
})
})
},
//获取数据
getMapData() {
this.mapData = this.geoJsonData.features.map((item) => {
return {
name: item.properties.name,
value: [item.properties.center[0], item.properties.center[1], parseInt(Math.random() * 60)],
level: item.properties.level,
citycode: item.properties.adcode
}
})
//去渲染echarts
this.initEcharts()
},
initEcharts() {
this.myChart = echarts.init(this.$refs.chartMap)
window.addEventListener('resize', () => {
this.myChart.resize()
})
echarts.registerMap('Map', this.geoJsonData)
this.myChart.setOption({
backgroundColor: '#0e265d',
tooltip: {
trigger: 'item',
formatter: p => {
let val = p.value
if (window.isNaN(val)) {
val = 0
}
let txtCon = p.name + '<br>' + '<hr>' + '数值 : ' + p.value[2]
return txtCon
}
},
title: {
show: true,
x: 'center',
y: 'top',
text: '地图下钻带散点图',
textStyle: {
color: 'rgb(97, 142, 205)',
fontSize: 16
}
},
geo: {
show: true,
type: 'map',
map: 'Map', //使用
roam: true,
nameProperty: '北京市',
itemStyle: {
normal: {
show: true,
areaColor: '#091632',
borderColor: '#1773c3',
borderWidth: '1',
shadowColor: '#1773c3'
},
//emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
emphasis: {
show: false,
areaColor: '#0e265d',
borderColor: '#83BAFF',
shadowColor: '#1773c3',
shadowBlur: 20
}
},
label: {
normal: {
show: true, //显示省份标签
color: '#ddb926'
},
emphasis: {
//对应的鼠标悬浮效果
show: false,
color: '#ddb926'
}
},
zoom: 1.25
},
series: [{
name: '城市',
type: 'scatter',
coordinateSystem: 'geo',
data: this.mapData,
//这里可以设置点的大小
symbolSize: function(val) {
return val[2] / 2;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false //是否显示值
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: '前5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: this.mapData.slice(0, 5),
symbolSize: function(val) {
return val[2] / 2;
},
showEffectOn: 'render', //前5名显示动画效果
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: p => {
return p.value[2]
},
position: 'center',
show: false
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
},
true
)
let that = this
this.myChart.off('click')
this.myChart.on('click', params => { //地图点击事件
if (params.componentType == "series") {
let cityCode = params.data.citycode;
that.parentCode.push(cityCode)
that.getGeoJson(cityCode)
} else {
let name = params.name;
this.mapData.forEach((item) => {
if (item.name == name) {
if (that.parentCode.indexOf(item.citycode) != -1) return;
that.parentCode.push(item.citycode)
that.getGeoJson(item.citycode)
}
})
}
})
},
//返回上一级
backTop() {
if (this.parentCode.length === 1) return
// //删除最后一位
this.parentCode.pop()
this.getGeoJson(this.parentCode[this.parentCode.length - 1])
}
}
}
</script>
<style lang="less" scoped>
.wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.echarts {
width: 100%;
height: 100%;
position: relative;
}
.back {
position: absolute;
left: 2%;
top: 2%;
color: #eee;
z-index: 99999;
cursor: pointer;
}
</style>