新加点击功能
This commit is contained in:
a0049873
parent
4a0516fe11
commit
011a68190d
|
|
@ -1,67 +1,65 @@
|
|||
<template>
|
||||
<home-header></home-header>
|
||||
<div class="survey-left">
|
||||
<div class="survey-left" @click="hidePop()">
|
||||
<div ref="cityMap" class="city-map-content-echarts"></div>
|
||||
<div class="mask">
|
||||
<div class="box xha">
|
||||
<div class="top">
|
||||
<span>西海岸</span>
|
||||
<span>
|
||||
跳转至该站点
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<span>基础设施</span>
|
||||
<i></i>
|
||||
<span>35282</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>数据资源</span>
|
||||
<i></i>
|
||||
<span>11</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>应用资源</span>
|
||||
<i></i>
|
||||
<span>23</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>组件服务</span>
|
||||
<i></i>
|
||||
<span>8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zx"></div>
|
||||
<div class="box xha" v-show="xhaFlag">
|
||||
<div class="top">
|
||||
<span>西海岸</span>
|
||||
<span>
|
||||
跳转至该站点
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="box lsq">
|
||||
<div class="top">
|
||||
<span>崂山区</span>
|
||||
<span>
|
||||
跳转至该站点
|
||||
<i></i>
|
||||
</span>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<span>基础设施</span>
|
||||
<i></i>
|
||||
<span>35282</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<span>基础设施</span>
|
||||
<i></i>
|
||||
<span>13000</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>数据资源</span>
|
||||
<i></i>
|
||||
<span>860</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>应用资源</span>
|
||||
<i></i>
|
||||
<span>30</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>数据资源</span>
|
||||
<i></i>
|
||||
<span>11</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>应用资源</span>
|
||||
<i></i>
|
||||
<span>23</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>组件服务</span>
|
||||
<i></i>
|
||||
<span>8</span>
|
||||
</div>
|
||||
<div class="zx"></div>
|
||||
</div>
|
||||
<div class="zx"></div>
|
||||
</div>
|
||||
<div class="box lsq" v-show="lsqFlag">
|
||||
<div class="top">
|
||||
<span>崂山区</span>
|
||||
<span>
|
||||
跳转至该站点
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<span>基础设施</span>
|
||||
<i></i>
|
||||
<span>13000</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>数据资源</span>
|
||||
<i></i>
|
||||
<span>860</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>应用资源</span>
|
||||
<i></i>
|
||||
<span>30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zx"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ability-to-recommend-bottom></ability-to-recommend-bottom>
|
||||
|
|
@ -73,6 +71,8 @@
|
|||
import geoJson from '/public/static/echartsMapJson/qingdao.json'
|
||||
// const loadedDataUrl = '/public/static/echartsMapJson/qingdao.json'
|
||||
const echarts = require('echarts')
|
||||
const xhaFlag = ref(false)
|
||||
const lsqFlag = ref(false)
|
||||
const areaMenuList = ref([
|
||||
// 全市概况
|
||||
// {
|
||||
|
|
@ -180,14 +180,6 @@
|
|||
const imgActive = new Image()
|
||||
imgActive.src = '/src/assets/home/map-piece-active.png'
|
||||
option = {
|
||||
// visualMap: {
|
||||
// show: false,
|
||||
// max: 100,
|
||||
// seriesIndex: 1,
|
||||
// inRange: {
|
||||
// color: ['#000000', 'yellow', 'pink'],
|
||||
// },
|
||||
// },
|
||||
visualMap: {
|
||||
//图例值控制
|
||||
min: 0,
|
||||
|
|
@ -238,6 +230,7 @@
|
|||
},
|
||||
],
|
||||
z: 2,
|
||||
silent: true,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -598,6 +591,11 @@
|
|||
console.log('echarts配置==================>', option)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
const hidePop = () => {
|
||||
console.log('取消弹窗')
|
||||
xhaFlag.value = false
|
||||
lsqFlag.value = false
|
||||
}
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
myChart.on('mouseover', function () {
|
||||
|
|
@ -605,6 +603,22 @@
|
|||
type: 'downplay',
|
||||
})
|
||||
})
|
||||
myChart.on('click', function (params) {
|
||||
console.log(params)
|
||||
params.event.event.stopPropagation()
|
||||
switch (params.name) {
|
||||
case '西海岸':
|
||||
xhaFlag.value = !xhaFlag.value
|
||||
lsqFlag.value = false
|
||||
break
|
||||
case '崂山区':
|
||||
lsqFlag.value = !lsqFlag.value
|
||||
xhaFlag.value = false
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -622,95 +636,89 @@
|
|||
height: 7rem;
|
||||
margin: 0rem auto;
|
||||
}
|
||||
.mask {
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: 19.2rem;
|
||||
height: 7rem;
|
||||
margin: 0rem auto;
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 3.18rem;
|
||||
height: 1.36rem;
|
||||
padding: 0.1rem 0.35rem 0;
|
||||
background: url('~@/assets/home/box_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
.top {
|
||||
width: 3.18rem;
|
||||
height: 1.36rem;
|
||||
padding: 0.1rem 0.35rem 0;
|
||||
background: url('~@/assets/home/box_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(161, 160, 161, 0.637);
|
||||
span:nth-of-type(1) {
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
cursor: pointer;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/home/tz.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 0.1rem;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(161, 160, 161, 0.637);
|
||||
span:nth-of-type(1) {
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
cursor: pointer;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/home/tz.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin: 0.02rem 0;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 0.1rem;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin: 0.02rem 0;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) > i {
|
||||
background: url('~@/assets/home/map_jcss.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(2) > i {
|
||||
background: url('~@/assets/home/map_sjzy.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(3) > i {
|
||||
background: url('~@/assets/home/map_yyzy.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(4) > i {
|
||||
background: url('~@/assets/home/map_zjfw.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(1) > i {
|
||||
background: url('~@/assets/home/map_jcss.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.zx {
|
||||
width: 1.5rem;
|
||||
height: 0.66rem;
|
||||
background: url('~@/assets/home/zx.png') no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
top: -0.9rem;
|
||||
left: -1.84rem;
|
||||
.item:nth-of-type(2) > i {
|
||||
background: url('~@/assets/home/map_sjzy.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(3) > i {
|
||||
background: url('~@/assets/home/map_yyzy.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
.item:nth-of-type(4) > i {
|
||||
background: url('~@/assets/home/map_zjfw.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.xha {
|
||||
top: 5.45rem;
|
||||
left: 3.5rem;
|
||||
background: url('~@/assets/home/box_bg2.png') no-repeat;
|
||||
.zx {
|
||||
background: url('~@/assets/home/zx2.png') no-repeat;
|
||||
top: -0.9rem;
|
||||
left: 2.82rem;
|
||||
}
|
||||
.zx {
|
||||
width: 1.5rem;
|
||||
height: 0.66rem;
|
||||
background: url('~@/assets/home/zx.png') no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
top: -0.9rem;
|
||||
left: -1.84rem;
|
||||
}
|
||||
.lsq {
|
||||
top: 3.7rem;
|
||||
left: 11.95rem;
|
||||
}
|
||||
.xha {
|
||||
top: 5.45rem;
|
||||
left: 3.5rem;
|
||||
background: url('~@/assets/home/box_bg2.png') no-repeat;
|
||||
.zx {
|
||||
background: url('~@/assets/home/zx2.png') no-repeat;
|
||||
top: -0.9rem;
|
||||
left: 2.82rem;
|
||||
}
|
||||
}
|
||||
.lsq {
|
||||
top: 3.7rem;
|
||||
left: 11.95rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue