5 changed files with 198 additions and 3 deletions
@ -0,0 +1,52 @@ |
|||
var option = { |
|||
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', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default option; |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<div :style="{ width: 'width', height: 'height' }" class="chart-box"> |
|||
<div id="myEchart" ref="myEchart" style="width: 100%;height:100%;"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import option from './Map.js'; |
|||
|
|||
export default { |
|||
name: 'Map', |
|||
data() { |
|||
return { |
|||
width: '', |
|||
height: '', |
|||
}; |
|||
}, |
|||
mounted() { |
|||
console.log('地图'); |
|||
this.drawLine(); |
|||
let wh = window.innerWidth; |
|||
let hg = window.innerHeight; |
|||
this.width = wh + 'px'; |
|||
this.height = hg + 'px'; |
|||
console.log(this.height); |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerWidth; |
|||
hg = window.innerHeight; |
|||
this.width = wh + 'px'; |
|||
this.height = hg + 'px'; |
|||
})(); |
|||
}; |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.myChart) { |
|||
return; |
|||
} |
|||
this.myChart.dispose(); |
|||
this.myChart = null; |
|||
}, |
|||
methods: { |
|||
drawLine() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
let myChart = this.$echarts.init(document.getElementById('myEchart')); |
|||
// 绘制图表 |
|||
myChart.setOption(option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
/* 懒加载图标动画 */ |
|||
.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); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue