先看效果图
image.png
image.png
首先下载echarts 插件，3d地图需要依赖echarts-gl
npm install echarts --save
npm install echarts-gl --save
创建echarts 容器,及弹窗（弹窗内容根据业务自行调整，此处略过）
<div class="h-3" style="position: relative;">
<!--弹窗-->
<div class="layer" ref="layer" :style="styles" v-if="layerList.length>0">
<div class="content">
<p>LPL夏季赛({{name}})</p>
<Row style="text-align: center;line-height: 22px;height: 24px;">
<Button style="margin-left:4px" :type="item.selected?'warning':'info'" size="small" @click="tabsChange(item)" v-for="(item,index) in btn" :key="index">{{item.name}}</Button>
</Row>
<Row style="text-align: center;padding-bottom: 20px;">
<Col span="8" v-for="(item,index) in layerList" :key="index" class="col-item">
<div class="num">{{item.circle}}</div>
<div class="text">{{item.text}}</div>
</Col>
</Row>
<Spin fix style="background: rgba(0,0,0,0.5);font-size: 20px;" v-if="loading">
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
<div>Loading</div>
</Spin>
</div>
</div>
<div ref="myEchart" style="width: 100%;height:100%;"></div>
</div>
首先引入需要的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 不生效
data:[
{
name:"宜昌市",
itemStyle: { // 单个区域的样式设置
color: '#0489d6',
opacity: 1,
borderWidth: 0.4,
borderColor: '#0489d6'
},
label:{
show: true,//是否显示高亮
textStyle:{
color: '#fff',//高亮文字颜色
}
},
}]
}]
}
实例化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;
}
than.options.series[0].data[0].name = e.name;
than.myChart.setOption(than.options);
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) ;
}
}
