ECharts实现地图飞线

echarts版本:https://echarts.apache.org/zh/changelog.html

v5.x.x版本:不提供china.js和china.json文件

v4.x.x版本:使用npm安装echarts,默认包含china.js和china.json文件

目录

一、Html工程

二、vue工程

三、vue工程

四、矢量小图标

方案一:

方案二:


一、Html工程

效果图如下:

源码百度网盘: 

链接:https://pan.baidu.com/s/1tsPE5Qo1fKqWKGTCEmspuA?pwd=p0ib 
提取码:p0ib

二、vue工程

echarts版本v4.9.0:使用echarts依赖中的json文件,效果图如下,可以完整显示地图。

源码百度网盘:

链接:https://pan.baidu.com/s/17STxMmTSTxbZuHGbI2XzBw?pwd=irym 
提取码:irym

三、vue工程

echarts版本v5.5.0:使用从阿里云下载的json文件,效果图如下,不能完整显示地图。

源码百度网盘:

链接:https://pan.baidu.com/s/1hFifJNq8wbT5JpZRYGRn4Q?pwd=ptc1 
提取码:ptc1

四、矢量小图标

echarts中关于矢量小图标的描述:Documentation - Apache EChartsicon-default.png?t=N7T8https://echarts.apache.org/zh/option.html#series-effectScatter.symbol在上文效果图中,飞机和火车的小图标是用的svg矢量图,将文件用记事本打开,将<path d="">标签d后的内容复制到echarts地图symbol属性中即可,复杂的svg矢量小图标可能是符合路径,解决方案如下:

方案一:
  • 电脑已经安装 Adobe Illustrator CS6,可以使用
  • 鼠标点击选取整个图标:上方菜单对象  →  复合路径  →  建立 
  • 导出 svg 格式,以文本打开 svg,将 <path 的 d 属性复制
  • 复制后放入 symbol 中,前面加以 path://
方案二:
  • 使用GIMP软件,官网地址:https://www.gimp.org/downloads/
  • 使用教程参考:https://www.cnblogs.com/jasongrass/p/16011765.html

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

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

相关文章

c/c++ 编译过程

C的编译过程通常可以分为四个阶段&#xff1a;预处理、编译、汇编和链接。下面是这四个阶段的详细说明&#xff1a; 预处理&#xff08;Preprocessing&#xff09;&#xff1a;在这个阶段&#xff0c;预处理器&#xff08;cpp&#xff09;会处理源代码文件中的预处理指令&#…

【科普知识】伺服电机中的内置制动器

在工业自动化和机器人技术快速发展的今天&#xff0c;伺服电机作为核心驱动元件&#xff0c;其性能与功能直接影响整个系统的运行效率与稳定性。 近年来&#xff0c;一体化伺服电机技术不断融合创新&#xff0c;并逐步加入了许多新的硬件和软件的功能&#xff0c;为工业自动化领…

【施磊】C++语言基础提高:深入学习C++语言先要练好的内功

课程总目录 文章目录 一、进程的虚拟地址空间内存划分和布局二、函数的调用堆栈详细过程三、程序编译链接原理1. 编译过程2. 链接过程 一、进程的虚拟地址空间内存划分和布局 任何的编程语言 → \to → 产生两种东西&#xff1a;指令和数据 编译链接完成之后会产生一个可执行…

Linux备份服务及rsync企业备份架构(应用场景)

备份服务概述 备份服务:需要使用到脚本,打包备份,定时任务. 备份服务:rsyncd服务,不同主机之间数据传输. 特点&#xff1a; rsync是个服务也是命令使用方便&#xff0c;具有多种模式传输数据的时候是增量传输 增量与全量&#xff1a; 全量 &#xff1a;无论多少数据全部推…

设备管理全解析:从选购到报废的全方位指南

在现代企业快速发展、智能化运营过程中&#xff0c;企业设备管理是保障生产连续性和效率的核心环节&#xff0c;其重要性不言而喻。然而&#xff0c;许多企业在设备管理内容流程方面仍然使用传统管理办法&#xff0c;这不仅影响了生产效率&#xff0c;也增加了不必要的成本。那…

vuejs路由和组件系统

前端路由原理 createRouter * hash* window.addEventListener(hashChange)* 两种实现路由切换的模式&#xff1a;UI组件&#xff08;router-link&#xff0c;router-view&#xff09;&#xff0c;Api&#xff08;push()方法&#xff09; * history * HTML5新增的API &#xff0…

每日一题(1)

在看一本08年出版的书的时候&#xff0c;看到了这样一个问题&#xff0c;感觉答案很奇怪&#xff1a; public class demo_p22 {public static void main(String args[]){int sCook1,sFish2;//各技能标记character ch1new character();if(ch1.haveSkill(sCook))System.out.print…

【CSP CCF记录】202012-2 期末预测之最佳阈值

题目 过程 思路 第一次没用前缀和&#xff0c;暴力求解得50分。 采用前缀和方法。 1. 对原数组stu[i]进行排序。 2. 计算前缀和数组s[]&#xff0c;s[i]表示安全指数的y_i的前缀和&#xff0c;即安全指数小于等于y_i时的实际挂科情况&#xff0c;y_i之前有多少个未挂科&am…

无线领夹麦克风哪个品牌好?无线麦克风品牌排行榜前十名推荐

​在当今的数字化浪潮中&#xff0c;个人声音的传播和记录变得尤为重要。无论是会议中心、教室讲台还是户外探险&#xff0c;无线领夹麦克风以其卓越的便携性和连接稳定性&#xff0c;成为了人们沟通和表达的首选工具。面对市场上琳琅满目的无线麦克风选择&#xff0c;为了帮助…

Python筑基之旅-MySQL数据库(三)

目录 一、数据库操作 1、创建 1-1、用mysql-connector-python库 1-2、用PyMySQL库 1-3、用PeeWee库 1-4、用SQLAlchemy库 2、删除 2-1、用mysql-connector-python库 2-2、用PyMySQL库 2-3、用PeeWee库 2-4、用SQLAlchemy库 二、数据表操作 1、创建 1-1、用mysql-…

记录Python低代码开发框架zdppy_amcrud的开发过程

实现新增接口 基础代码 import env import mcrud import api import snowflakeenv.load(".env") db mcrud.new_env()table "user" columns ["name", "age"]async def add_user(req):data await api.req.get_json(req)values [d…

SkyEye对接CANoe:助力汽车软件功能验证

01.简介 CANoe&#xff08;CAN open environment&#xff09;是德国Vector公司专为汽车总线设计而开发的一款通用开发环境&#xff0c;作为车载网络和ECU开发、测试和分析的专业工具&#xff0c;支持从需求分析到系统实现的整个系统的开发过程。CANoe丰富的功能和配置选项被OE…

虚拟ECU:彻底改变汽车软件开发与测试

汽车开发领域有着垂直性较强的一系列需求&#xff0c;其中最为瞩目的需求之一就是对安全高效的软件测试方法的需求。传统的汽车开发偏向使用硬件原型与真实ECU进行软件测试&#xff0c;但由于硬件设备往往在开发周期的中后阶段才生产完成&#xff0c;给汽车开发带来了成本与时间…

电商内卷时代,视频号小店凭借一己之力“脱颖而出”

大家好&#xff0c;我是电商笨笨熊 今年618各大电商平台花样百出&#xff1b; 某宝更是直接取消了“预售”&#xff0c;从5月就开始进入618预热期&#xff1b; 不少玩家既开心又难过&#xff0c;市场如此内卷&#xff0c;618确实是个爆发期&#xff0c;但更多的需要不断压低…

Star CCM+分配零部件至区域后交界面丢失-更新找回

前言 在工程应用中&#xff0c;将零部件分配至区域后&#xff0c;一般常规的操作需要对交界面进行检查。偶尔会发现交界面丢失。遇到此类问题&#xff0c;在没有做其他操作前&#xff08;比如画网格&#xff09;&#xff0c;可以选择先删除所有区域在重新分配至区域。若已经进…

基于SSM的大学生兼职管理系统

基于SSM的大学生兼职管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 企业界面 前台学生界面 管理员界面 摘要 随着大学生兼职市场的日益繁…

K8s 高级调度

文章目录 K8s 高级调度CronJobinitContainerTaint 和 Toleration污点&#xff08;Taint&#xff09;容忍&#xff08;Toleration&#xff09; AffinityNodeAffinityPodAnffinity 和 PodAntiAffinity 总结 K8s 高级调度 CronJob 在 k8s 中周期性运行计划任务&#xff0c;与 li…

【vue echart】完成一个简单echart图表+自适应

实现效果&#xff1a; html&#xff1a; <divref"echartOne"id"echartOne"style"width: 100%; height: 100%" ></div> js: getEchartOne() {let chart this.$echarts.init(this.$refs.echartOne);chart.setOption({title: {text:…

云原生|为什么服务网格能够轻松重塑微服务?一文讲清楚!

目录 一、概述 二、 设计 三、服务网格 四、总结 一、概述 容器化技术与容器编排推动了微服务架构应用的演进&#xff0c;于是应用的扩展与微服务的数量日益增加&#xff0c;新的问题随之而来&#xff0c;监控服务的性能变得越来越困难&#xff0c;微服务与微服务之间相互通…

Kafka-集群管理者(Controller)选举机制、任期(epoch)机制

Kafka概述 Kafka-集群管理者&#xff08;Controller&#xff09;选举机制 Kafka中的Controller是Kafka集群中的一个特殊角色&#xff0c;负责对整个集群进行管理和协调。Controller的主要职责包括分区分配、副本管理、Leader选举等。当当前的Controller节点失效或需要进行重新…