先看效果图

image.png

image.png

首先下载echarts 插件，3d地图需要依赖echarts-gl

npm install echarts --save

npm install echarts-gl --save

创建echarts 容器,及弹窗(弹窗内容根据业务自行调整，此处略过)

首先引入需要的echarts包

import echarts from "echarts/lib/echarts" //echarts

import "echarts/map/js/province/hubei.js"; //对应的省份

import "echarts-gl" //3D地图插件

配置echarts 参数

this.options = {

series: [

{

type: 'map3D',

name: '湖北',

selectedMode:"single",//地图高亮单选

boxDepth:90,//地图倾斜度

regionHeight:8,//地图高度

map: '湖北',

viewControl:{

distance:150,//地图视角 控制初始大小

rotateSensitivity:0,//禁止旋转

zoomSensitivity:0,//禁止缩放

},

label: {

show: true,//是否显示市

textStyle:{

color:"#0a1640",//文字颜色

fontSize:12,//文字大小

backgroundColor:"rgba(0,0,0,0)",//透明度0清空文字背景

}

},

itemStyle: {

color:"#81d0f1",//地图颜色

borderWidth: 0.5,//分界线wdith

borderColor: "#459bca",//分界线颜色

},

emphasis:{

label:{

show: true,//是否显示高亮

textStyle:{

color: '#fff',//高亮文字颜色

}

},

itemStyle:{

color: '#0489d6',//地图高亮颜色

}

},

//高亮市区 echarts bug 不生效

regions:[

{

name:"宜昌市",

itemStyle:{

areaColor:"#f00",

}

}

]

}]

}

实例化echarts

this.myChart = echarts.init(this.$refs.myEchart);

this.myChart.setOption(this.options);

//echarts自适应

window.onresize = this.myChart.resize;

let than = this ;

//绑定市区点击事件

this.myChart.on("click",function(e){

//防止重复点击

if(than.name == e.name){

return false;

}

//由于地图默认高亮不生效(echarts bug) 此处没写高亮对应市区

than.styles.left = (e.event.event.offsetX-132)+"px";//-132 根据布局计算偏移量

than.styles.top = (e.event.event.offsetY+80)+"px";//80根据布局计算偏移量

than.name = e.name;

//请求后台接口获取对应数据 ---此处模拟

than.tabsChange(than.btn[0]);

})

防止内存泄漏，vue钩子函数beforeDestroy(组件生命周期--实例对象销毁之前触发)

beforeDestroy() {

if (!this.myChart) {

return;

}

this.myChart.dispose();

this.myChart = null;

},

弹窗样式

/*懒加载图标动画*/

.demo-spin-icon-load{

animation: ani-demo-spin 1s linear infinite;

}

@keyframes ani-demo-spin {

from { transform: rotate(0deg);}

50% { transform: rotate(180deg);}

to { transform: rotate(360deg);}

}

/*弹窗样式*/

.layer{

position: absolute;

left: 400px;

top: 300px;

z-index: 100;

width: 360px;

height: 280px;

background:rgba(10,22,64,0.9) ;

border-radius: 5px;

border: 1px solid #122253;

transform: translate(-100%,-100%);

.content{

width: 100%;

height: 100%;

position: relative;

text-align: center;

p{

font-size: 20px;

color: #fff;

line-height: 50px;

}

.col-item{

height: 41px;

margin-top: 20px;

border-right: 1px solid #172353;

.num{

color: #ebf8ff;

font-size: 18px;

}

.text{

color: #507ebc;

font-size: 12px;

}

}

}

.content::after{

content: "";

width: 120px;

height: 2px;

background: #FFCCFF;

position: absolute;

right: -120px;

top: 50%;

transform: translateY(-50%);

}

.content::before{

content: "";

width: 2px;

height: 80px;

background: #FFB800;

position: absolute;

right: -134px;

top: 136px;

transform:rotateZ(-20deg) ;

}

}