前言 echarts使用很多次了，可以配置地图还是第一次，要实现的是地图上标注两个点，点击点弹出弹窗，点击可以跳转，效果如下： Echarts官网配置项参考 Echarts官网的一参考demo
贴关键代码，配置项太多要一个一个去看，有点麻烦. map.vue
<template> <div class="map"> <div class="map-wrapper"> </div> <div class="box" v-show="showBox"> <ul> <li v-for="(pro, index) in projectInfo" :key="index" :class="{'last': index === projectInfo.length-1}"> <a :href="pro.addressUrl" target="_blank">{{pro.pName}}</a> </li> </ul> </div> </div> </template> <script> import 'echarts/map/js/china//这里引用的自带的，如果引用外部china.js会出现this指向问题 import {path} from "./utils/data"; export default { name: "myMap", data() { return { myChart: '', series: [], showBox: false, projectInfo: [], SHANGHAI: [ { pName: 'xxxx', addressUrl: 'https://ims.epceta.com/login' }, { pName: 'xxxxxx', addressUrl: 'https://www.epceta.com/login' } ], WUHAN: [ { pName: 'xxxxx', addressUrl: 'https://www.epctfm.com/#/login' } ] } }, mounted() { const _this = this console.log(this.$echarts) this.mapRender(); window.addEventListener('resize', function () { _this.myChart.resize() }) document.body.addEventListener('click',function() { _this.showBox = false }) }, methods: { mapRender() { const _this = this; let mapDom = document.querySelector('.map-wrapper') this.myChart = this.$echarts.init(mapDom); let data = [ {name: '上海', value: '90'}, {name: '武汉', value: 90}, ] let geoCoordMap = { //可以在地图上显示的城市的坐标信息 '武汉':[114.31,30.52], '上海': [121.4648, 31.2891], }; let convertData = function (data) {//返回[{coord: 极坐标},{coord: 极坐标}] var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; _this.series.push([{ name: '项目分布', type: 'effectScatter', roam: true, // 可缩放 // geoIndex: 'geoMap', z: 2, coordinateSystem: 'geo', symbolSize: 10,//点的大小 symbol: 'emptyCircle', color: 'orange', showEffectOn: 'render', effectType: 'ripple', rippleEffect: { period: 5, scale: 10, brushType: 'fill' }, label: { normal: { formatter: '{b}', position: 'right', show: true, color: '#fff' } }, data: convertData(data), }, { name: '项目分布', type: 'scatter', z: 5, roam: true, // 可缩放 coordinateSystem: 'geo', symbolSize: [20,30],//点的大小 symbolOffset: [0,-15], symbol: 'path://'+path, color: '#e1ebe3', showEffectOn: 'render', effectType: 'ripple', itemStyle: { color: 'blue' }, label: { normal: { show: false,//是否显示省份 textStyle: { color: '#00a0c9', size: '10' } } }, markLine: { smooth: true, symbol: ['none', 'circle'], symbolSize: 1, itemStyle: { normal: { color: '#ff0', borderWidth: 1, borderColor: 'rgba(0,0,0,0)' } }, data: [], }, data: convertData(data), }, { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#FFFFFF', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, }, ]) // 指定相关的配置项和数据 let mapBoxOption = { backgroundColor: '#051B4A', title: { text: '项目分布', subtext: '更新于2019-10', sublink: 'http://www.pm25.in', left: 'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item', formatter: function (params) { return params.name } }, geo: { map: 'china', id: 'geoMap', roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 // aspectScale: 0.75, zoom: 1.20, label: { normal: { show: true,//是否显示省份 textStyle: { color: '#00a0c9', size: '8' } }, emphasis: { // 对应的鼠标悬浮效果 show: false, textStyle: { color: "blue" } } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)',//#D79D3D borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' }, { offset: 1, color: 'rgba(147, 235, 248, .2)' }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 30 }, }, emphasis: { // 鼠标划入省份的样式 itemStyle: { areaColor: '#389BB7', }, label: { color: 'blue' } }, animation: false }, series: _this.series[0] }; this.myChart.setOption(mapBoxOption) this.myChart.off('click'); this.myChart.on('click', function (params) { params.event.event ? params.event.event.stopPropagation() : event.cancelBubble = true if(params.name === '武汉') _this.projectInfo = [..._this.WUHAN] else if(params.name === '上海') _this.projectInfo = [..._this.SHANGHAI] if (['scatter', 'effectScatter'].includes(params.componentSubType)) { //点击某个点的操作 _this.showBox = true if(_this.showBox) _this.fixingPositon() }else{ _this.showBox = false } }) }, fixingPositon() { const e = event || window.event, top = e.clientY, left = e.clientX, boxDom = document.querySelector('.box'); this.$nextTick(function(){ const offsetX = boxDom.clientWidth; const offsetY = boxDom.clientHeight; boxDom.style.cssText = `top: ${top-offsetY-25}px; left: ${left + offsetX/3}px`; }) }, } } </script>参考博客 Vue引入echarts中国地图
