vue echarts 3D地图+省+弹窗

先看效果图

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 不生效
                        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) ;
    }
}