先看效果图
image.png
image.png
首先下载echarts 插件,3d地图需要依赖echarts-gl
npm install echarts --save
npm install echarts-gl --save
创建echarts 容器,及弹窗(弹窗内容根据业务自行调整,此处略过)
LPL夏季赛({{name}})
{{item.name}}
首先引入需要的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) ;
}
}