|
效果图如下（东营市地图）
1.地图显示
首先要获取该地区的JSON数据，网站：DATAV.GeoAtolas，逐步选择地图区域，然后复制数据到本地另存为dy.json。
直接上代码了，添加了详细备注
//引入地图数据
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 = `
医院
接入设备数
`
for (let i = 0; i < obj.length; i++) {
str = str +
`
${obj[i].name}
${obj[i].value}
`
}
str = str + "";
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)
},
}
}
复制代码
2.注意问题
和后端商定好你需要的数据格式，以我的项目为例。对照一下上文代码，很容易看懂。
返回数据的name一定要和你地图数据（dy.json）中的地区名一致！差个空格都不行！！！
暂时就想到了这么多，收工。
|