先看效果圖
image.png
image.png
首先下載echarts 插件，3d地圖需要依賴echarts-gl
npm install echarts --save
npm install echarts-gl --save
創(chuàng)建echarts 容器,及彈窗（彈窗內(nèi)容根據(jù)業(yè)務自行調(diào)整纲菌，此處略過）
<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 參數(shù)
this.options = {
series: [
{
type: 'map3D',
name: '湖北',
selectedMode:"single",//地圖高亮單選
boxDepth:90,//地圖傾斜度
regionHeight:8,//地圖高度
map: '湖北',
viewControl:{
distance:150,//地圖視角 控制初始大小
rotateSensitivity:0,//禁止旋轉(zhuǎn)
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',//地圖高亮顏色
}
},
//高亮市區(qū) echarts bug 不生效
data:[
{
name:"宜昌市",
itemStyle: { // 單個區(qū)域的樣式設(shè)置
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 ;
//綁定市區(qū)點擊事件
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 根據(jù)布局計算偏移量
than.styles.top = (e.event.event.offsetY+80)+"px";//80根據(jù)布局計算偏移量
than.name = e.name;
//請求后臺接口獲取對應數(shù)據(jù) ---此處模擬
than.tabsChange(than.btn[0]);
})
防止內(nèi)存泄漏，vue鉤子函數(shù)beforeDestroy（組件生命周期--實例對象銷毀之前觸發(fā)）
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) ;
}
}
