效果图如下(东营市地图)
1.地图显示
首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,然后复制数据到本地另存为dy.json。
直接上代码了,添加了详细备注
<template>
<div id="mapView" class="map-view"/>
</template>
<script>
//引入地图数据
import dy from '@/assets/dy'
//引入echarts以及提示框和标题组件
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/gauge')
require('echarts/lib/chart/map')
require('echarts/lib/component/visualMap')
require('echarts/lib/component/legend')
export default {
mounted() {
this.getMapInfo() //获取地图显示的数据
},
methods: {
async getMapInfo() {
let res = await getMapData() //自己封装的请求方法
this.buildMap(res.data) //有数据格式要求,下文细说
},
buildMap(data) {
let myMap = echarts.init(document.getElementById('mapView')) //初始化节点实例
echarts.registerMap('东营', dy) //注册可用的地图
//配置项
let option = {
//移入地图时展示信息
tooltip: {
trigger: "item",
backgroundColor: 'opacity',
//感觉代码写的不美观。。。显示的样式根据情况而定
formatter: function(params) {
let obj1 = JSON.parse(JSON.stringify(params));
let obj = obj1.data.emphasis
let str = `
<ul style='width:200px; padding: 8px 20px;background: #0b2668;border: 1px solid #123c8e'>
<li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #123c8e;padding-bottom: 5px'>
<p>医院</p>
<p>接入设备数</p>
</li>
`
for (let i = 0; i < obj.length; i++) {
str = str +
`
<li style='height: 20px; list-style: none; color: #198aea;font-size: 12px;display: flex;justify-content: space-between;align-items: center;margin: 5px 0'>
<p>${obj[i].name}</p>
<p>${obj[i].value}</p>
</li>
`
}
str = str + "</ul>";
return str;
}
},
series: [
{
name: '东营市地图',
type: 'map',
mapType: '东营', // 自定义扩展图表类型,和上文注册名字的一样
itemStyle: {
normal: { //正常状态
label: {
show: true,
formatter: '{b}-{c}', //地图上显示的数据,分别对应data中的name和value
color: '#fff',
},
areaColor: '#0a76d1' //地图区域的颜色
},
emphasis: { // 鼠标移入高亮状态
label: {
show: true
},
areaColor: '#ccb213'
},
},
aspectScale: 1, //用于 scale 地图的长宽比
zoom: 1,
top: '60',
data: data
}
],
}
myMap.clear()
myMap.setOption(option)
},
}
}
</script>
2.注意问题
-
和后端商定好你需要的数据格式,以我的项目为例。对照一下上文代码,很容易看懂。
-
返回数据的 name 一定要和你地图数据(dy.json)中的地区名一致!差个空格都不行!!!
暂时就想到了这么多,收工。