wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

新加点击功能

This commit is contained in:
a0049873 2022-06-15 16:28:55 +08:00
parent 4a0516fe11
commit 011a68190d
1 changed files with 152 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
front/src/views/home/mapTest/index.vue
View File

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