Vue 世界地图七大洲mark标记效果

设计稿如下：（世界地图七大洲xx分布）

用echart插件实现效果如下：（`差别很大`），需要换思路

最终前端实现效果：（svg图片 + 数据 + 标记 + 小动画）

最终使用由设计提供的svg图片（普通png,jpg也可以）实现，后台动态数据接入

用样式标记出位置，:style 实现
通过相同name，将默认位置数据与后端返回的数据聚合在一起，concatLocate()
完成效果后考虑加上小动画(圆圈荡漾) 动画 ripple

<template><div class="worldBox"><div class="mapBox"><img src="@/assets/img/map.svg" alt="" width="100%" height="auto" /><divv-for="(item, index) in worldData":key="index"class="markBox":style="{ left: item.left + 'px', top: item.top + 'px' }"><i class="circleRipple"></i><i class="el-icon-location"></i><p>{{ item.name }}: {{ item.count }}</p></div></div><div class="barBox"><p v-for="(item, index) in worldData" :key="index"><span>{{ item.count }}</span><span>{{ item.name }}</span></p><i></i></div></div>
</template>

<script>
export default {name: "ChartMapWorld",data() {return {worldData: [], // 后端返回的数据mapLocation: [{name: "North America",top: 80,left: 600},{name: "Asia",top: 95,left: 240},{name: "Europea",top: 114,left: 75},{name: "Oceania",top: 285,left: 330},{name: "South Americ",top: 265,left: 710},{name: "Africa",top: 220,left: 75}] //提前准备好的定位样式};},created() {this.worldData = [{name: "North America",count: 75},{name: "Asia",count: 60},{name: "Europea",count: 45},{name: "Oceania",count: 30},{name: "South Americ",count: 15},{name: "Africa",count: 15}];this.concatLocate();},mounted() {},methods: {/** 根据传来的数据 连接定位样式*/concatLocate() {this.worldData.map(item => {this.mapLocation.map(locate => {if (item.name === locate.name) {Object.assign(item, { left: locate.left, top: locate.top });}});});}}
};
</script>


<style lang="scss" scoped>
.worldBox {display: flex;justify-content: space-between;align-items: flex-end;margin: 40px 0;padding: 0 20px;.mapBox {position: relative;width: 78%;.markBox {position: absolute;width: 140px;height: 74px;text-align: center;cursor: pointer;p {opacity: 0;position: relative;margin: 32px 0 0 0;width: 140px;padding: 4px 0;background: #fff;border-radius: 4px;color: #009fe3;font-weight: 500;box-shadow: 0 4px 20px -4px rgba(36, 57, 65, 0.4);transition: all 0.2s ease-out;&:after {position: absolute;top: -12px;left: 50%;margin-left: -3px;display: inline-block;content: "";border-width: 6px;border-style: solid;border-color: transparent transparent #fff transparent;}}i.el-icon-location {position: absolute;left: 50%;margin-left: -9px;font-size: 24px;color: #fff;text-shadow: 0 3px #009fe3;cursor: pointer;}&:hover {p {opacity: 1;}}}}
}
.barBox {position: relative;p {margin-bottom: 45px;span:first-child {width: 50px;margin-right: 40px;}span:last-child {width: 150px;}}i {position: absolute;top: 0;left: 30px;display: inline-block;width: 12px;height: 335px;border-radius: 6px;background: linear-gradient(180deg, #007fb5 0%, #ccecf9 100%);}
}
/* 圆圈荡漾 circleRipple*/
.circleRipple{position: absolute;display: block;width: 14px;height: 14px;/*background: #e8f6fd;*/border-radius: 50%;margin: 14px 0 0 67px;&:after{content: ''; /* 注：before,after伪类必须加 content:'';*/position: absolute;width: 26px;height: 26px;left: -7px;top: -7px;border: 4px solid #fff;border-radius: 30px;z-index: 1;opacity: 0;-webkit-animation: ripple 3s ease-out infinite;-moz-animation: ripple 3s ease-out infinite;animation: ripple 3s ease-out infinite;}
}
/* 荡漾动画 ripple*/
@keyframes ripple {0% {transform: scale(0);opacity: 0;}25% {transform: scale(0);opacity: .1;}50% {transform: scale(.1);opacity: .3;}75% {transform: scale(.5);opacity: .5;}100% {transform: scale(1);opacity: 0;}
}
@-webkit-keyframes ripple {0% {-webkit-transform: scale(0);opacity: 0;}25% {-webkit-transform: scale(0);opacity: .1;}50% {-webkit-transform: scale(.1);opacity: .3;}75% {-webkit-transform: scale(.5);opacity: .5;}100% {-webkit-transform: scale(1);opacity: 0;}
}
</style>

Vue 世界地图七大洲mark标记效果相关推荐

探索频道和谷歌联合制作七大洲人文VR视频，11月3日可收看
(52VR.com优质翻译) 美国探索频道Discovery和谷歌昨天宣布将发布38集虚拟现实系列视频<Discovery TRVLR>,这部系列由探索频道和谷歌内部VR团队联合制 ...
七种布局显示方式效果及实现
我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用"Hello World!"程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两 ...
vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
pytest框架之mark标记功能详细介绍
文章末尾给大家留了大量福利一.mark标记在实际工作中,我们要写的自动化用例会比较多,也不会都放在一个py文件中,如果有几十个py文件,上百个方法,而我们只想运行当中部分的用例时怎么办? py ...
足不出户，游遍七大洲，不可错过的14部地理纪录片！
见识是超越时间与空间的力量,使人身未行,而心已至之. 今天的资源分享就从七大洲为切入点,为各位献上最值得观看的14部地理纪录片,与各位一起探索各大洲的独一无二的自然与人文景观,从这些丰富的影像中,不仅 ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
【pytest官方文档】解读- 如何自定义mark标记，并将测试用例的数据传递给fixture函数
在之前的分享中,我们知道可以使用yield或者return关键字把fixture函数里的值传递给test函数. 这种方法很实用,比如我在fixture函数里向数据库里插入必要的测试数据,那我就可以把相 ...

Vue 世界地图七大洲mark标记效果

设计稿如下：（世界地图七大洲xx分布）

用echart插件实现效果如下：（`差别很大`），需要换思路

最终前端实现效果：（svg图片 + 数据 + 标记 + 小动画）

Vue 世界地图七大洲mark标记效果相关推荐

最新文章

热门文章

Vue 世界地图 七大洲mark标记效果

设计稿如下：（世界地图 七大洲xx分布 ）

用echart插件实现效果如下：（差别很大），需要换思路

最终前端实现效果：（svg图片 + 数据 + 标记 + 小动画）

Vue 世界地图 七大洲mark标记效果相关推荐

最新文章

热门文章

Vue 世界地图七大洲mark标记效果

设计稿如下：（世界地图七大洲xx分布）

用echart插件实现效果如下：（`差别很大`），需要换思路

Vue 世界地图七大洲mark标记效果相关推荐