vue中利用Echarts实现飞线(飞机)地图样式

实现效果
思想:主要是三个要素:1 地图样式 2散点图 3飞线 组合配置后就形成以下效果。

在这里插入图片描述

第一步:vue中引入Echarts

npm install vue-echarts echarts

第二步:导入代码

代码已经写好,直接引入运行就好了,关键代码有注释,可查询修改。

<template><!-- 飞线图组件 --><div class="map"><h2>消费者扫码辐射图</h2><!-- 地图容器 --><div class="content" ref="echarts"></div></div>
</template><script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
// 引入js
import 'echarts/map/js/china.js'export default {components: {},data () {// 这里存放数据return {}},mounted () {this.init()},// 数据部分methods: {init () {const myChart = echarts.init(this.$refs.echarts)// 这个数据是散点数据,用于在地图上面展示。const chinaGeoCoordMap = {黑龙江: [127.9688, 45.368],内蒙古: [110.3467, 41.4899],吉林: [125.8154, 44.2584],宜宾市: [104.630825, 28.760189],辽宁: [123.1238, 42.1216],// 河北: [114.4995, 38.1006],// 天津: [117.4219, 39.4189],// 山西: [112.3352, 37.9413],// 陕西: [109.1162, 34.2004],// 甘肃: [103.5901, 36.3043],// 宁夏: [106.3586, 38.1775],// 青海: [101.4038, 36.8207],// 新疆: [87.9236, 43.5883],// 西藏: [91.11, 29.97],// 四川: [103.9526, 30.7617],// 重庆: [108.384366, 30.439702],// 山东: [117.1582, 36.8701],// 河南: [113.4668, 34.6234],// 江苏: [118.8062, 31.9208],// 安徽: [117.29, 32.0581],// 湖北: [114.3896, 30.6628],// 浙江: [119.5313, 29.8773],// 福建: [119.4543, 25.9222],// 江西: [116.0046, 28.6633],// 湖南: [113.0823, 28.2568],安阳: [113.625891, 35.20554],贵州: [106.6992, 26.7682],云南: [102.9199, 25.4663],广东: [113.12244, 23.009505],广西: [108.479, 23.1152],海南: [110.3893, 19.8516],上海: [121.4648, 31.2891]}// 散点const chinaDatas = []// 临时数组// const mapObject = { name: '', value: null }// 飞线const lineObject = { coords: [[113.4668, 34.6234]] }const linesCoord = []for (const key in chinaGeoCoordMap) {const mapObject = { name: '', value: null }// console.log('打印一下key:' + key)mapObject.name = keymapObject.value = chinaGeoCoordMap[key]// chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))chinaDatas.push(mapObject)if (key !== '广东') {lineObject.coords[1] = chinaGeoCoordMap[key]linesCoord.push(JSON.parse(JSON.stringify(lineObject)))}}// 配置部分const option = {// geo配置详解: https://echarts.baidu.com/option.html#geo// 这里是配置最下面的地图部分geo: {zlevel: 0, // 数值越大越是在上面map: 'china',show: true,roam: false, // 使地图不能放大拖动top: '20px',label: {emphasis: {show: false,focus: 'self'}},// 地图的背景色itemStyle: {normal: {areaColor: 'rgba(0, 0, 0, 0)', // 变成透明borderColor: '#fff',shadowColor: '#09184F',shadowBlur: 20// borderWidth: 20}}},series: [// 配置散点图的数据{type: 'effectScatter',coordinateSystem: 'geo',// 要有对应的经纬度才显示,先经度再维度data: chinaDatas,showEffectOn: 'render',rippleEffect: {scale: 4, // 波纹的最大缩放比例brushType: 'stroke'},hoverAnimation: true,label: {normal: {show: true,formatter: '{b}',position: 'right',fontWeight: 500,fontSize: 14}},itemStyle: {normal: {// color: '#00e3ff',color: 'yellow',shadowBlur: 5,shadowColor: '#333'}},emphasis: {itemStyle: {color: '#f4e925' // 高亮颜色}},zlevel: 1},// 飞线的配置{type: 'lines',coordinateSystem: 'geo',zlevel: 1,effect: { // 飞机的特效配置show: true,period: 5,trailLength: 0,symbol: 'image:src/assets/airplane.svg',color: 'yellow',symbolSize: 8},lineStyle: {normal: {width: 1.2,opacity: 0.6,curveness: 0.2,color: '#FFB800'}},data: linesCoord}]}myChart.setOption(option)}}
}
</script><style lang="scss" scoped>.map{width: 900px;height: 900px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);// background-image: url("../assets/bg.jpg");}h2{left: 35%;top: 15%;padding-top: 40px;color: #fff;font-size:22px;// top: 200px;position: absolute;}.content {width: 800px;height: 800px;top: 200px;position: absolute;// height: 100vh;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52166.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信息安全面试题合集

0x00 前言 本篇会记录一些可能会遇到的面试题&#xff0c;持续更新 0x01 Web SQL注入 sql注入常见的闭合方式有哪些&#xff1f;Mysql5.0上下sql注入有什么区别&#xff1f;SQL注入空格被过滤&#xff0c;有什么绕过方式&#xff1f;过滤了逗号&#xff0c;有什么绕过方式&…

字节跳动 Git 的正确使用姿势与最佳实践

版本控制Git 黑马&尚硅谷 Git的前世今生 方向介绍 为什么要学习Git 1.0 Git是什么 1.1 版本控制 1.1.1 本地版本控制 1.1.2 集中版本控制 1.1.3 分布式版本控制 我们已经把三个不同的版本控制系统介绍完了&#xff0c;Git 作为分布式版本控制工具&#xff0c; 虽然目前来讲…

Django(4)-Django 管理页面

创建一个管理员账号 python manage.py createsuperuser运行项目&#xff0c;访问http://127.0.0.1:8080/admin&#xff0c;可以看到管理员界面 管理页面加上投票应用 polls/admin.py from django.contrib import admin# Register your models here. from .models import …

自动化测试之Junit

Junit引入注解参数化单参数多参数方法传参 测试用例执行顺序断言测试套件 Junit引入 Junit来编写和组织自动化测试用例&#xff0c;使用Selenium来实际模拟用户与Web应用程序的交互。也就是使用JUnit的测试功能来管理和运行Selenium测试。常见的做法是&#xff0c;使用JUnit作…

OpenCV实战系列总目录(更新中)

1、openCV实战-系列教程1&#xff1a;基本操作&#xff08;环境配置/图像读取打印/视频读取打印/图像裁剪/颜色通道提取/边界填充/数值计算&#xff09;、源码解读 openCV实战-系列教程1&#xff1a;基本操作&#xff08;环境配置/图像读取打印/视频读取打印/图像裁剪/颜色通道…

Android 13.0 framework中实现默认长按电源键弹出关机对话框功能

1.前言 在13.0的系统定制化开发中,在12.0的系统之前默认的都是长按电源键弹出关机对话框,而在13以后 就改成音量+电源键弹出对话框,由于使用不方便,所以就改成默认长按弹出关机对话框功能 2.framework中实现默认长按电源键弹出关机对话框功能的核心类 frameworks/base/s…

【Vue框架】基本的login登录

前言 最近事情比较多&#xff0c;只能抽时间看了&#xff0c;放几天就把之前弄的都忘了&#xff0c;现在只挑着核心的部分看。现在铺垫了这么久&#xff0c;终于可以看前端最基本的登录了&#x1f602;。 1、views\login\index.vue 由于代码比较长&#xff0c;这里将vue和js…

一个简单的web应用程序的创建

一个简单的web应用程序的创建 1、数据库设计与创建1.1、数据库系统1.2、Navicat Premium1.3、Power Designer 2、使用maven创建SpringBoot项目2.1、配置maven2.2、安装idea2.3、使用idea创建maven项目2.4、根据需要配置pom.xml文件、配置项目启动相关的文件2.5、写SpringBoot项…

Unity——DOTween插件使用方法简介

缓动动画既是一种编程技术&#xff0c;也是一种动画的设计思路。从设计角度来看&#xff0c;可以有以下描述 事先设计很多基本的动画样式&#xff0c;如移动、缩放、旋转、变色和弹跳等。但这些动画都以抽象方式表示&#xff0c;一般封装为程序函数动画的参数可以在使用时指定&…

目标检测笔记(十一):如何结合特定区域进行目标检测(基于OpenCV的人脸检测实例)

文章目录 背景代码结果 背景 由于我们在做项目的时候可能会涉及到某个指定区域进行目标检测或者人脸识别等任务&#xff0c;所以这篇博客是为了探究如何在传统目标检测的基础上来结合特定区域进行检测&#xff0c;以OpenCV自带的包为例。 一般来说有两种方式实现区域指定&…

k8s删除pod镜像没响应marking for deletion pod TaintManagerEviction

使用命令强制删除 Pod的状态为"Marking for deletion"表示该Pod正在被标记为待删除状态&#xff0c;但实际上并没有被删除。这可能是因为以下原因之一&#xff1a; 删除操作被阻塞&#xff1a;可能是由于某些资源或容器正在使用该Pod&#xff0c;导致删除操作被阻塞…

【动手学深度学习】--20.目标检测和边界框

文章目录 目标检测和边界框1.目标检测2.边界框 目标检测和边界框 学习视频&#xff1a;物体检测和数据集【动手学深度学习v2】 官方笔记&#xff1a;目标检测和边界框 在图像分类任务中&#xff0c;我们假设图像中只有一个主要物体对象&#xff0c;我们只关注如何识别其类别…

docker在阿里云上的镜像仓库管理

目录 一.登录进入阿里云网站&#xff0c;点击个人实例进行创建 二.创建仓库&#xff0c;填写相关信息 三.在访问凭证中设置固定密码用于登录&#xff0c;登录时用户名是使用你注册阿里云的账号名称&#xff0c;密码使用设置的固定密码 四.为镜像打标签并推送到仓库 五.拉取…

互联网医院成品功能你有哪些看法?

随着信息化的飞速发展&#xff0c;医疗领域信息化程度日益加深&#xff0c;医院对于信息化的自身需求越来越高&#xff0c;由此也推动了医院信息化的快速发展。而即时医疗信息服务能够解决普通老百姓医疗信息匮乏、花大钱看小病、就医不及时等基本问题。通过智能手机、平板电脑…

uni-app封装省市区下拉组件(后台获取数据)

一.后台数据格式 PROCINCE:[{itemName:,itemValue:}] CITY:[{itemName:,itemValue}] AREA:[{itemName:,itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码 <template><picker change"bindPickerChange" columnchange"…

OpenCV中常用的函数

OpenCV是一个功能强大的计算机视觉库&#xff0c;提供了众多用于图像处理、计算机视觉和机器学习的函数和模块。以下是一些OpenCV中常用的函数和模块的子集&#xff1a; 图像读取和显示&#xff1a; cv::imread&#xff1a;用于读取图像文件。cv::imshow&#xff1a;用于显示图…

Web安全测试(二):HTTP状态码、响应和url详解

一、前言 结合内部资料,与安全渗透部门同事合力整理的安全测试相关资料教程,全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试,覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬! 全部文章请访问专栏:《全栈安全测试教程(0基…

jdk 04 stream的collect方法

01.收集(collect) collect&#xff0c;收集&#xff0c;可以说是内容最繁多、功能最丰富的部分了。 从字面上去理解&#xff0c;就是把一个流收集起来&#xff0c;最终可以是收集成一个值也可以收集成一个新的集合。 collect主要依赖java.util.stream.Collectors类内置的静态方…

七大出海赛道解读,亚马逊云科技为行业客户量身打造解决方案

伴随全球化带来的新机遇和国内市场的进一步趋于饱和&#xff0c;近几年&#xff0c;中国企业出海快速升温&#xff0c;成为了新的创业风口和企业的第二增长曲线。从范围上看&#xff0c;出海市场由近及远&#xff0c;逐步扩张。从传统的东南亚市场&#xff0c;到成熟的北美、欧…

DB2的系统数据表空间,用户数据表空间,系统临时表空间,用户临时表空间详解

可以参考DB2 information center的官方文档&#xff1a;https://www.ibm.com/docs/zh/db2/10.5?topicspaces-table-system-user-temporary-data 每个数据库都必须要有最小的一组表空间&#xff0c;这些表空间用于存储系统数据、用户数据和临时数据。 一个数据库至少必须包含三…