vue echarts 3D地图+省+弹窗

先看效果图

image.png

image.png

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

npm install echarts --save
npm install echarts-gl --save

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

                

                    
                    

                        

                            
LPL夏季赛({{name}})
                            
                                {{item.name}}
                            
                            
                                
                                    
{{item.circle}}
                                    
{{item.text}}
                                
                            
                            
                                
                                
Loading
                            
                        
                    
                    

                

首先引入需要的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) ;
    }
}