先看效果圖

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 不生效

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) ;

}

}

總結

以上是生活随笔為你收集整理的echart 广州3d_vue echarts 3D地图+省+弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。