Vue+Echarts 实现中国地图和飞线效果

目录

    • 实现效果
    • 准备

实现效果

在这里插入图片描述

在线预览:https://mouday.github.io/vue-demo/packages/china-map/dist/index.html

准备

高版本的echarts,不包含地图数据,需要自己下载到项目中

1、地图数据下载

https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

2、注册地图到echarts中

//根据自身情况,粘贴来的数据放在哪里就从哪里导入
import chinaMap from "@/assets/map/china.json";//注册地图到echarts中  这里的 "china" 要与地图数据的option中的geo中的map对应
echarts.registerMap("china", { geoJSON: chinaMap });

为了能复现效果,给出了项目的完整结构和完整代码

项目结构

$ tree -I node_modules
.
├── package.json
└── src├── App.vue├── ChinaMap.vue├── main.js└── utils├── event-util.js└── map-util├── china.json├── index.js└── map-data.js

package.json

{"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"echarts": "^5.5.0","element-ui": "^2.15.11","vue": "^2.6.14"},"devDependencies": {"@vue/cli-service": "^5.0.8","less": "^4.0.0","less-loader": "^8.0.0","vue-template-compiler": "^2.6.14"}
}

ChinaMap.vue

主要有3个部分:地图、线条、点

<template><div class="chartMap" ref="chinaMap"></div>
</template><script>
import * as echarts from "echarts";
import "@/utils/map-util/index.js"; // 注册地图数据
import { chinaRegions } from "@/utils/map-util/map-data.js";// 事件监听工具类
import * as eventUtil from "@/utils/event-util.js";export default {name: "dataView",data() {return {chinaMap: "", // 地图};},created() {},mounted() {this.init();},beforeDestroy() {eventUtil.off(window, "resize", this.handleWindowResize);},methods: {handleWindowResize() {//动态改变图表尺寸this.chinaMap.resize();},init() {this.getMap(); // 地图},// 地图getMap() {this.chinaMap = echarts.init(this.$refs.chinaMap);let option = {// 设置地图样式geo: {map: "china",zoom: 1.2,layoutSize: "100%", //保持地图宽高比// 设置图块颜色,也可以通过图例 visualMap 设置颜色,但是飞线的颜色设置会失效,一直取 图例 设置的颜色;根据需求选择;regions: chinaRegions,label: {// 默认样式normal: {show: false,fontSize: "10",color: "rgba(255,255,255,.3)",},// 高亮样式emphasis: {show: true,textStyle: {color: "#1955a4",},},},itemStyle: {// 默认样式,图块没数据时,会取默认颜色normal: {borderColor: "#c0e0e3",areaColor: "#29c5f6",opacity: 0.8,},// 高亮样式emphasis: {areaColor: "#f2d5ad",},},},series: [// 设置飞线样式{type: "lines",coordinateSystem: "geo",zlevel: 100,effect: {show: true,period: 4, // 图标飞跃速度,值越小速度越快trailLength: 0.2, // 尾迹长度[0,1]值越大,尾迹越长symbol: "pin", // 图标类型symbolSize: 4, // 图标大小color: "#f5f3b3", // 图标颜色},lineStyle: {color: "#000",normal: {show: true,width: 1, //尾迹线条宽度opacity: 0.1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度color: "#44add00f", // 飞线颜色},},// 飞线数据data: [[{// 出发coord: [117.1582, 36.8701], // 山东value: 1,},{// 目的地coord: [116.4551, 40.2539], // 北京},],[{// 出发coord: [110.3893, 19.8516], // 海南value: 1,},{// 目的地coord: [116.4551, 40.2539], // 北京},],],},// 中心点设置{type: "effectScatter",coordinateSystem: "geo",zlevel: 15,rippleEffect: {period: 3,brushType: "fill", // 动画样式 fill strokescale: 60,color: "#7ce7fd",number: 2,},symbol: "circle", // 图标样式symbolSize: 2,itemStyle: {color: "#5cc8d4",},// 中心点数据data: [{name: "北京",value: [116.4551, 40.2539, 10],},],},],};this.chinaMap.setOption(option);eventUtil.on(window, "resize", this.handleWindowResize);},},
};
</script><style lang="less">
.chartMap {width: 500px;height: 500px;background: #132d48;
}
</style>

源码地址:https://github.com/mouday/vue-demo

参考文章

  • Echarts 实现中国地图 + 飞线效果

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

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

相关文章

Pasta:HHE Optimized Stream Cipher

参考文献&#xff1a; [Dae95] Daemen J .Cipher and hash function design strategies based on linear and differential cryptanalysis[J].Doctoral Dissertation K.u.leuven, 1995.[GPP11] Guo J, Peyrin T, Poschmann A. The PHOTON family of lightweight hash function…

class091 贪心经典题目专题3【左程云算法】

class091 贪心经典题目专题3【左程云算法】 前言版权推荐class091 贪心经典题目专题3最后 前言 2024-4-23 13:58:40 以下内容源自《【左程云算法】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://…

数据转换 | Matlab基于RP递归图一维数据转二维图像方法

目录 效果分析基本介绍程序设计参考资料获取方式 效果分析 基本介绍 Matlab基于RP递归图一维数据转二维图像方法 基于RP&#xff08;Recurrence Plot&#xff09;递归图的方法可以将一维数据转换为二维图像&#xff0c;以可视化数据的动态特征。RP递归图是一种表示时间序列相…

【数据结构3-栈和队列】

数据结构3-栈和队列 1 栈-特殊的线性表-先进后出1.1 栈的三个案例 2 队列-与栈相反-先进先出2.1 队列的案例 3 用C实现栈的代码&#xff1a;4 用C实现队列的代码 1 栈-特殊的线性表-先进后出 1.1 栈的三个案例 2 队列-与栈相反-先进先出 2.1 队列的案例 3 用C实现栈的代码&…

代码随想录算法训练营第三十六天| LeetCode435.无重叠区间、LeetCode763.划分字母区间、LeetCode56.合并区间

LeetCode 435 无重叠区间 题目链接&#xff1a;435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 【解题思路】 需要先将数组按照左/右边界排序&#xff0c;这里按照左边界排序来解 如果第i个区间的左边界大于等于i-1区间的右边界 【解题步骤】 1.判断数组大小&am…

如何处理PHP中的文件上传和下载?

如何处理PHP中的文件上传和下载&#xff1f; 处理PHP中的文件上传和下载是Web开发中常见的任务&#xff0c;涉及到前端表单的设计、后端脚本的编写以及服务器配置等多个方面。下面将详细阐述如何在PHP中实现文件上传和下载的功能。 文件上传 文件上传通常涉及前端表单的创建…

【前端】vue3使用方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、vue3简介二、使用步骤三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人学习前端工具&#xff0c;本文主要是介绍vue3的使用方…

package.json 里面的 dependencies 和 devDependencies 的差异

差异 其实不严格的话&#xff0c;没有特别的差异&#xff1b;若是严格&#xff0c;遵循官方的理解。 dependencies&#xff1a;存放线上或者业务能访问的核心代码模块&#xff0c;比如 vue、vue-routerdevDependencies&#xff1a;处于开发模式下所依赖的开发模块&#xff0c…

c++ 二分查找

二分查找&#xff08;Binary Search&#xff09;是一种在有序数组中查找特定元素的高效算法。它通过不断将搜索范围减半来查找目标元素。其时间复杂度为 O(log n)&#xff0c;这是因为每一步都将搜索范围减半&#xff0c;因此算法的性能非常高。 二分查找的基本思想是&#xf…

如何在TestNG中忽略测试用例

在这篇文章中&#xff0c;我们将讨论如何在TestNG中忽略测试用例。TestNG帮助我们忽略使用Test注释的情况&#xff0c;我们可以在不同的级别上忽略这些情况。 首先&#xff0c;只忽略一个测试方法或测试用例。第二&#xff0c;忽略一个类及其子类中的所有情况。第三个是&#…

C语言实现双人贪吃蛇项目(基于控制台界面)

一.贪吃蛇 贪吃蛇是一款简单而富有乐趣的游戏&#xff0c;它的规则易于理解&#xff0c;但挑战性也很高。它已经成为经典的游戏之一&#xff0c;并且在不同的平台上一直受到人们的喜爱和回忆。 二.贪吃蛇的功能 游戏控制&#xff1a;玩家可以使用键盘输入设备来控制蛇的移动方…

二分查找-边界条件讨论

题目&#xff1a;二分查找 存在问题的地方&#xff1a; 边界条件while(left __ right)中是 < 还是 <循环中if(nums[middle] > target) right _____中是middle还是middle - 1 应该在区间上讨论&#xff1a; 左闭右闭&#xff1a;[ left , right ]左闭右开&#xf…

二维字符型数组算法整理

1. 二维字符串数组的冒泡排序 #include <stdio.h> #include <string.h>int main(void) {char str[5][32] {0};int i 0;int j 0;char tmp[32] {0};for (i 0; i < 5; i){gets(str[i]);}for (i 0; i < 4; i){for (j 0; j < 4-i; j){if (strcmp(str[j…

【软件安装】(十六)双系统Ubuntu22.04引导启动菜单的默认项

一个愿意伫立在巨人肩膀上的农民...... 好学的人总是喜欢在电脑上安装双系统&#xff0c;可是安装好系统之后&#xff0c;就会出现默认启动优先级的苦恼&#xff0c;如果在Bios中设置Windows引导启动为优先启动&#xff0c;那么每次想要进如Ubuntu系统就都需要重新设置Bios。如…

TP6.0 命令行生成类库文件

1. 生成控制器 // 默认生成资源控制器&#xff0c;有七个方法资源操作方法// index、create、save、read、edit、update、deletephp think make:controller Blog// 创建多级控制器php think make:controller user/Blog// 创建index应用下的Blog控制器php think make:controller…

[Vue warn]: useModel() called with prop “xxx“ which is not declared

我们在使用vue3里面的defineModel的时候可能会出现这个问题&#xff0c;原因是我们使用的 kebab-case 形式的属性名&#xff0c;我也不知道是不是vue3设定这个api的时候设置的不支持&#xff0c;我没找到相关文档&#xff0c;不过我们把 kebab-case 的形式改为 驼峰命名法 或者…

YOLOv8 训练自己的数据集(20240423)

环境搭建请参考&#xff1a;Win10 搭建 YOLOv8 运行环境&#xff08;20240423&#xff09;-CSDN博客 环境测试请参考&#xff1a;本地运行测试 YOLOv8&#xff08;20240423&#xff09;-CSDN博客 一、使用 YOLOv8 的 coco128 数据集熟悉一下如何训练和预测 1.1、在项目根目录…

ClickHouse用UDF解析XML字符串和XML文件

一.如果是读取xml文件的时候&#xff0c;文件入库需要使用文件读取UDF 创建了1个测试文件 wsdFileRead()&#xff1a; 直接读取文件内容 SELECT wsdFileRead(/home/temp/wsd_test.xml)Query id: 09b6e5fe-7169-43f7-b001-90e2eeabb8da┌─wsdFileRead(/home/temp/wsd_test.xm…

广州大学《虚拟现实与游戏开发》实验报告一HTC-VR环境搭建与开发

广州大学学生实验报告 开课实验室&#xff1a; 学院 年级、专业、班 姓名 学号 实验课程名称 虚拟现实与游戏开发 成绩 实验项目名称 1. HTC-VR环境搭建与开发 指导老师 实验目的 HTC VIVE硬件安装虚拟现实开发环境搭建 3.熟悉虚拟现实硬件系统和…

串口服务器和光纤交换机的区别

串口服务器与光纤交换机在功能和应用上存在显著区别。串口服务器主要实现串口设备与以太网设备之间的数据转换与传输&#xff0c;适用于远程监控、数据采集等场景&#xff1b;而光纤交换机则专注于高速光纤网络中的数据交换&#xff0c;为大型企业或数据中心提供稳定、高效的数…