vue 使用 Echarts做地图及飞线效果

前言:

        效果图

        

一. 项目中安装以及引入Echarts

1.1 npm 命令安装echarts库

npm install echarts --save

1.2 yarn命令安装echarts库

yarn add echarts

1.3 引用

        a. 在使用页面上引入 在Vue组件的script标签中引入echarts库

                使用 echarts

import * as echarts from "echarts";

        b. 全局引用 在main.js中引入echarts库

                使用 this.$echarts

import echarts from 'echarts';
Vue.use(echarts);
Vue.prototype.$echarts = echarts;

二. 创建Echarts地图

1. echarts展示的盒子

        Echarts父盒子有多大 Echarts就展示多大。

<template><div class="linesbox"><div id="linesecharts" style="width: 100%; height: 100%"></div></div>
</template>

2. 引入地图数据

import testjson from "./../../utils/bj.json";

这个地图数据是北京市各个区边界数据。下载地址:https://datav.aliyun.com/portal/school/atlas/area_selector

这地址我们可以下载自己所想要的地图边界数据。或者是找公司给我边界数据。格式必须跟这个一样。

 把上面的数据下载下来 并引入我们就可以使用。

3. 飞线数据以及方法

       

sjfbEcharts: null,        // echarts实例// 图片是base64也行
planePath:"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
linesData: [{fromName: '西城区',        // 飞线起始位置toName: '海淀区',          // 飞线结束位置coords: [[116.36567, 39.912028],    // 飞线起始位置[116.23328, 40.026927]     // 飞线结束位置],value: 100},{fromName: '怀柔区',toName: '海淀区',coords: [[116.586079, 40.63069],[116.23328, 40.026927]],value: 100},
],
mounted() {this.initMapEcharts();
},
initMapEcharts() {let zhenjie = "海淀区";  // 自己命名let data = testjson.features;let mapList = testjson;// 获取echarts盒子并初始化this.sjfbEcharts = this.$echarts.init(document.getElementById("linesecharts")); this.$echarts.registerMap(zhenjie, mapList);let options = {geo: {type: "map",map: zhenjie, //chinaMap需要与registerMao中的变量名称保持一致raom: false,itemStyle: {normal: {areaColor: "rgb(4,46,84)",borderColor: "#fff",},emphasis: {areaColor: "#389bb7", //鼠标指上市时的颜色},},label: {normal: {position: "bottom",show: true, //不显示textStyle: {// 地图上散点的字体样式fontSize: 16,fontWeight: "400",color: "#fff", // 点上字的颜色},},emphasis: {show: true,},},},series: [// 地图配置{name: "海淀区信息",type: "map",map: zhenjie,label: {show: true, //是否显示市normal: {textStyle: {fontSize: 12,fontWeight: "bold",color: "#fff",},},},zoom: 1.2,data: data,itemStyle: {normal: {label: { show: true },color: "#F4F4F4",areaColor: "#1E62AC",borderColor: "#53D9FF",borderWidth: 1.3,shadowBlur: 15,shadowColor: "rgb(58,115,192)",shadowOffsetX: 4,shadowOffsetY: 4,},// 鼠标移入地区的样式emphasis: {label: { show: true, color: "#fff" },borderWidth: 3,borderColor: "#1eccc6",areaColor: "#07b4af",shadowColor: "#1eccc6",shadowBlur: 15,},},},// 飞线配置{type: "lines",zlevel: 2,effect: {show: true,period: 5, // 箭头指向速度,值越小速度越快trailLength: 0, // 特效尾迹长度[0,1]值越大,尾迹越长重symbol: this.planePath, // 飞机图标symbolSize: 15, // 图标大小color: "#01AAED",},// 可以配置自己的飞线图标// effect: {//     show: true,//     period: 5, // 箭头指向速度,值越小速度越快//     trailLength: 0, // 特效尾迹长度[0,1]值越大,尾迹越长重//     symbol: this.planePath, // 飞机图标//     symbolSize: 15, // 图标大小//     color: "#01AAED",// },lineStyle: {normal: {width: 0.8, // 尾迹线条宽度opacity: 1, // 尾迹线条透明度curveness: 0.3, // 尾迹线条曲直度},},data: this.linesData,},],};this.sjfbEcharts.setOption(options);setTimeout(() => {window.addEventListener("resize", () => this.sjfbEcharts.resize());}, 0);},

三. 完整代码

<template><div class="linesbox"><div id="linesecharts" style="width: 100%; height: 100%"></div></div>
</template><script>
import * as echarts from "echarts";
import testjson from "./../../utils/bj.json";
export default {data() {return {sjfbEcharts: null,//定义散点坐标scatterData: [{ name: "东城区", value: [116.418757, 39.917544] },{ name: "西城区", value: [116.366794, , 39.915309] },],linesData: [{fromName: '西城区',toName: '海淀区',coords: [[116.36567, 39.912028],[116.23328, 40.026927]],value: 100},{fromName: '怀柔区',toName: '海淀区',coords: [[116.586079, 40.63069],[116.23328, 40.026927]],value: 100},],planePath:"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",};},mounted() {this.initMapEcharts();},methods: {initMapEcharts() {let zhenjie = "海淀区";let data = testjson.features;let mapList = testjson;this.sjfbEcharts = this.$echarts.init(document.getElementById("linesecharts"));this.$echarts.registerMap(zhenjie, mapList);let options = {geo: {type: "map",map: zhenjie, //chinaMap需要与registerMao中的变量名称保持一致raom: false,itemStyle: {normal: {areaColor: "rgb(4,46,84)",borderColor: "#fff",},emphasis: {areaColor: "#389bb7", //鼠标指上市时的颜色},},label: {normal: {position: "bottom",show: true, //不显示textStyle: {// 地图上散点的字体样式fontSize: 16,fontWeight: "400",color: "#fff", // 点上字的颜色},},emphasis: {show: true,},},},series: [{name: "海淀区信息",type: "map",map: zhenjie,label: {show: true, //是否显示市normal: {textStyle: {fontSize: 12,fontWeight: "bold",color: "#fff",},},},zoom: 1.2,data: data,itemStyle: {normal: {label: { show: true },color: "#F4F4F4",areaColor: "#1E62AC",borderColor: "#53D9FF",borderWidth: 1.3,shadowBlur: 15,shadowColor: "rgb(58,115,192)",shadowOffsetX: 4,shadowOffsetY: 4,},// 鼠标移入地区的样式emphasis: {label: { show: true, color: "#fff" },borderWidth: 3,borderColor: "#1eccc6",areaColor: "#07b4af",shadowColor: "#1eccc6",shadowBlur: 15,},},},{//飞线图参数type: "lines",zlevel: 2,effect: {show: true,period: 5, // 箭头指向速度,值越小速度越快trailLength: 0, // 特效尾迹长度[0,1]值越大,尾迹越长重symbol: this.planePath, // 飞机图标symbolSize: 15, // 图标大小color: "#01AAED",},// lineStyle: {//     normal: {//         width: 0.8, // 尾迹线条宽度//         opacity: 1, // 尾迹线条透明度//         curveness: 0.3, // 尾迹线条曲直度//     },// },// effect: {//     show: true,//     period: 3,          // 箭头指向速度,值越小速度越快//     trailLength: 0.2,   // 特效尾迹长度[0,1]值越大,尾迹越长重//     symbol: "circle",   // 箭头图标circle//     symbolSize: 4,      // 图标大小//     color:'#fff',       // 流动的颜色// },lineStyle: {normal: {width: 0.8,     // 尾迹线条宽度opacity:1,      // 尾迹线条透明度curveness: 0.3, // 尾迹线条曲直度},},data: this.linesData,}],};this.sjfbEcharts.setOption(options);setTimeout(() => {window.addEventListener("resize", () => this.sjfbEcharts.resize());}, 0);},},
};
</script><style lang="less" scoped>
.linesbox {width: 100%;height: 100%;
}
</style>

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

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

相关文章

动态面板简介以及ERP原型图案列

动态面板简介以及ERP原型图案列 1.Axure动态面板简介2.使用Axure制作ERP登录界面3.使用Asure完成左侧菜单栏4.使用Axuer完成公告栏5.使用Axuer完成左边侧边栏 1.Axure动态面板简介 在Axure RP中&#xff0c;动态面板是一种强大的交互设计工具&#xff0c;它允许你创建可交互的…

【C#】Microsoft C# 之 LINQ 查询语法视频学习总结

1、LINQ - 限制操作符&#xff08;Restriction Operators&#xff09; The where clause of a LINQ query restricts the output sequence. Only the elements that match a condition are added to the output sequence.译文&#xff1a;LINQ查询的where子句限制了输出顺序。…

mysql数据库损坏后重装,数据库备份

重装 先卸载 sudo apt-get remove --purge mysql-server mysql-client mysql-common sudo apt-get autoremove sudo apt-get autoclean 然后重新安装MySQL: sudo apt-get install mysql-server mysql-client 首先要先使用无密码登录数据库一定要使用 sudo mysql -uroo…

TOGAF—架构(Architecture)项目管理

一、简介 1.1概述 架构(Architecture)项目在本质上通常是复杂的。他们需要适当的项目管理来保持正轨并兑现承诺。本指南适用于负责规划和管理架构(Architecture)项目的人员。我们解释了如何用事实上的方法和标准(如PRINCE2或PMBOK)来补充TOGAF架构开发方法(ADM),以加…

跨站点分布式多活存储建设方案概述

1-伴随着私有云、海量非结构数据的爆炸性增长&#xff0c;软件定义存储已经成为用户构建“敏捷IT” 架构的数据基石&#xff0c;同时越来越多的关键业务接入“敏捷IT” 架构。在分布式软件定义存储的产品架构下&#xff0c;怎样既保证对爆炸数据量的平稳承接&#xff0c;又能对…

C#Winform菜鸟驿站管理系统-快递信息管理界面多条件查询实现方法

1&#xff0c;具体的页面设计如下&#xff0c; 2&#xff0c; 关于下拉框数据填充实现&#xff0c;站点选择代码实现如下&#xff0c;因为站点加载在很多界面需要用到&#xff0c;所以把加载站点的方法独立出来如下&#xff1b; /// <summary>/// 加载站点下拉框/// <…

SaaS行业分析

文章目录 什么是SaaS ?SaaS的标准定义什么是软件即服务&#xff1f;SaaS与传统软件的区别 &#xff1f; SaaS行业分析你知道最赚钱的行业是什么&#xff1f;互联网带给企业的变化 SaaS与PaaS、IaaS的区别&#xff1f;IaaS&#xff08;Infrastructure as a Service&#xff09;…

配置VRRP负载分担示例

一、组网需求&#xff1a; HostA和HostC通过Switch双归属到SwitchA和SwitchB。为减轻SwitchA上数据流量的承载压力&#xff0c;HostA以SwitchA为默认网关接入Internet&#xff0c;SwitchB作为备份网关&#xff1b;HostC以SwitchB为默认网关接入Internet&#xff0c;SwitchA作为…

【面试】Java最新面试题资深开发-Spring篇(1)

问题八&#xff1a;Spring原理 解释一下什么是Spring框架以及它的核心思想是什么&#xff1f;Spring中的IoC&#xff08;控制反转&#xff09;是什么&#xff0c;它如何实现&#xff1f;什么是DI&#xff08;依赖注入&#xff09;&#xff1f;Spring是如何支持依赖注入的&…

基于YOLOv8深度学习的高精度车辆行人检测与计数系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

介绍一款低代码数据可视化平台

一、前言 随着企业数字化拉开序幕&#xff0c;低代码( Low Code Development)开发的概念开始火起来&#xff0c;即用少量的代码就能开发复杂的业务系统。然后更进一步&#xff0c;由此又催生出一个新的概念&#xff1a;无代码开发( No Code Development)。 低代码和无代码开发平…

Docker单点部署 Elasticsearch + Kibana [8.11.3]

文章目录 一、Elasticsearch二、Kibana三、访问四、其他 Elasticsearch 和 Kibana 版本一般需要保持一致才能一起使用&#xff0c;但是从 8.x.x开始&#xff0c;安全验证不断加强&#xff0c;甚至8.x.x之间的版本安全验证方法都不一样&#xff0c;真的很恼火。 这里记录一次成…

娱乐新拐点:TikTok如何改变我们的日常生活?

在数字时代的浪潮中&#xff0c;社交媒体平台不断涌现&#xff0c;其中TikTok以其独特的短视频内容在全球范围内掀起了一场娱乐革命。本文将深入探讨TikTok如何改变我们的日常生活&#xff0c;从社交互动、文化传播到个人创意表达&#xff0c;逐步改写了娱乐的新篇章。 短视频潮…

go-zero开发入门之gateway深入研究1

创建一个 gateway 示例&#xff1a; // main.go package mainimport ("flag""fmt""gateway/middleware""github.com/zeromicro/go-zero/core/conf""github.com/zeromicro/go-zero/gateway" )var configFile flag.String(&…

idea2023解决右键没有Servlet的问题

复制Servlet Class.java中的文件。 回到文件&#xff0c;然后点击小加号 然后输入刚刚复制的东西&#xff1a; 3. 此时右键有servlet。 4. 然后他让你输入下面两个框&#xff1a; JAVAEE TYPE中输入Servlet Class Name 表示你要创建的Servlet类的名称是什么。自己起名字。然后…

手动添加Git Bash Here到右键菜单(超详细)

通过WindowsR快捷键可以打开“运行窗口”&#xff0c;在“窗口”中输入“regedit”&#xff0c;点击“确定”打开注册表。 依次进入HKEY_CLASSES_ROOT —-》 Directory —-》Background —-》 shell 路径为Computer\HKEY_CLASSES_ROOT\Directory\Background\shell 3.在“s…

Python中Requests的深入了解

Requests的深入了解 基本POST请求&#xff08;data参数&#xff09; 1. 最基本post方法 response requests.post("http://www.baidu.com/", data data)2. 传入data数据 对于 POST 请求来说&#xff0c;我们一般需要为它增加一些参数。那么最基本的传参方法可以…

状态的一致性和FlinkSQL

状态一致性 一致性其实就是结果的正确性。精确一次是指数据有可能被处理多次&#xff0c;但是结果只有一个。 三个级别&#xff1a; 最多一次&#xff1a;1次或0次&#xff0c;有可能丢数据至少一次&#xff1a;1次或n次&#xff0c;出错可能会重试 输入端只要可以做到数据重…

mongo分组查询问题以及mongo根据Date类型查询

一、mongo分组查询 mongo中如果只是根据条件查询数据&#xff0c;则只需要&#xff1a; db.getCollection(表名).find({source:{$eq:5}}) 如果根据字段进行分组查询&#xff0c;那么需要用aggregate传一个数组进行查询&#xff0c;如 db.getCollection(表名).find({ "…

[每周一更]-(第27期):HTTP压测工具之wrk

[补充完善往期内容] wrk是一款简单的HTTP压测工具,托管在Github上,https://github.com/wg/wrkwrk 的一个很好的特性就是能用很少的线程压出很大的并发量. 原因是它使用了一些操作系统特定的高性能 io 机制, 比如 select, epoll, kqueue 等. 其实它是复用了 redis 的 ae 异步事…