ECharts实现地图飞线

news2024/10/6 12:33:48

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.coloradmin.cn/o/1684858.html

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

相关文章

国赛部分复现

MISC 神秘文件 下载解压后是个pptm文件&#xff0c;内容丰富 使用010打开ppt查看 发现为PK开头&#xff0c;属于压缩包文件。复制粘贴ppt&#xff0c;修改副本后缀为.zip并解压 part1 查看属性&#xff0c;发现奇怪字符 QFCfpPQ6ZymuM3gq 根据提示Bifid chipher&#xff0c;…

简单美观易上手的 Docker Compose 可视化管理器 Dockge

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 Dockge 是 Uptime Kuma 作者的新作品&#xff0c;因此 UI 风格与 Uptime Kuma 基本一致&#xff0c;如果你正在使用 Uptime Kuma 的话&#xff0c;那么 Dockge 的 UI 设计应该也不会让你失望。Dockge 主打…

【Floodfill算法】dfs或者bfs解决floodfill算法

1.图像渲染 图像渲染 dfs解决代码&#xff1a; class Solution { public:int dx[4] {0, 0, -1, 1};int dy[4] {-1, 1, 0, 0};int m, n;int prev;vector<vector<int>> ret;vector<vector<int>> floodFill(vector<vector<int>>& ima…

SpringBean-生命周期

Spirng Bean 元信息配置阶段 1 面向资源 xml配置&#xff08;很熟悉了不做讨论&#xff09;Properties配置 public class BeanMetaDemo {public static void main(String[] args) {DefaultListableBeanFactory factory new DefaultListableBeanFactory();PropertiesBeanDef…

从零开始搭建SpringCloud Alibaba微服务架构

Spring Cloud Alibaba是Spring Cloud的一个拓展项目&#xff0c;它用于构建基于阿里巴巴的微服务应用。它提供了多个阿里巴巴的开源组件&#xff0c;如Nacos、Sentinel、Dubbo等&#xff0c;用于解决微服务架构中的服务注册、配置管理、流量控制等问题。 Spring Cloud Alibaba…

老题重测,国产AI大模型从“智障”走向“智能”?

2023年8月&#xff0c;拿我家小孩的一道小学数学题来测试了一批知名的国产大模型&#xff0c;结果很失望&#xff0c;没有一个能答对。最近正好看到OpenAI GPT-4o发布的新闻&#xff0c;于是跑去重测了一遍&#xff0c;结果很惊喜&#xff0c;绝大部分国产AI大模型都给出清晰、…

MySQL密码忘记之通过Navicat保存的加密密码来解码过程

MySQL密码忘记之通过Navicat保存的加密密码来解码过程 一、前言 许久不用数据库MySQL&#xff0c;因此密码忘记&#xff0c;但是在Navicat上保存了MySQL的密码&#xff0c;然而Navicat上保存的密码是加密的&#xff0c;无法直接复制来使用&#xff0c;因此需要对Navicat上保存…

如何停止 iPad 和 iPhone 之间共享短信,独立接收和发送消息

概括 在当今高度互联的数字世界中&#xff0c;Apple 设备之间的无缝连接性提供了极大的便利&#xff0c;尤其是在消息同步方面。iPhone 和 iPad 用户通常可以享受到设备间短信的自动同步功能&#xff0c;这意味着无论是在哪个设备上&#xff0c;用户都可以接收和回复消息。然而…

英伟达发布亮眼财报,大超预期!

KlipC报道&#xff1a;5月22日美股收盘后&#xff0c;英伟达公布第一财季财报。实现了260亿美元营收&#xff0c;远超分析师预测的246.5亿美元&#xff0c;同比增长262%。Q1净利润148.1亿美元&#xff0c;同比增长628%。此外&#xff0c;Q1毛利率也继续上升&#xff0c;达到了7…

VMware ESXi 7.0 U3q 发布 - 领先的裸机 Hypervisor

VMware ESXi 7.0 U3q 发布 - 领先的裸机 Hypervisor VMware ESXi 7.0 Update 3 Standard & All Custom Image for ESXi 7.0U3 Install CD 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-7-u3/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出…

【HCIP学习】RSTP和MSTP

一、RSTP&#xff08;Rapid Spanning Tree Protocol&#xff0c;快速生成树&#xff09; 1、背景&#xff1a;RSTP从STP发展而来&#xff0c;具备STP的所有功能&#xff0c;可以兼容stp运行 2、RSTP与STP不同点 &#xff08;1&#xff09;减少端口状态 STP:disabled\blockin…

Diffusion Policy:基于扩散模型的机器人动作生成策略

项目地址&#xff1a; Diffusion Policy (columbia.edu) 一、摘要 本文介绍了 "扩散策略"&#xff0c;这是一种生成机器人行为的新方法&#xff0c;它将机器人的视觉运动策略&#xff08;visuomotor policy&#xff09;表示为条件去噪扩散过程&#xff08;conditi…

P1【知识点】【数据结构】【链表LinkedList】C++版

链表是一种逻辑上连续&#xff0c;内存上分散的线性表数据结构&#xff0c;是用一组任意的空间&#xff08;可以连续&#xff0c;也可以不连续&#xff09;来存放数据元素。每个数据元素成为一个”结点“&#xff0c;每个结点由数据域和指针域组成。 访问元素&#xff08;Acce…

RK3588 Android13 TvSetting 中增加字体大小调整菜单

前言 电视产品,客户要求在设置中设备偏好设置子菜单里的显示和声音二级菜单里增加字体大小菜单功能, 其实里面本来有个文字缩放菜单,但不满足客户需求,那就新加一个也不是什么难事,开整。 效果图 TvSetting 部分修改文件清单 packages/apps/TvSettings/Settings/res/va…

解锁 user-agent(UA)识别 Api 接口的无限潜力

近年来&#xff0c;随着移动设备的普及和互联网的迅猛发展&#xff0c;用户使用不同的操作系统、浏览器以及硬件设备来访问网页的情况越来越多样化。为了更好地了解用户的访问环境和提供更好的用户体验&#xff0c;我们需要通过用户的访问UA&#xff08;User-Agent&#xff09;…

指针,指针变量,引用,取地址符,malloce()函数使用,C中“—>” 和“ . ” 作用与区别

目录 一&#xff1a;指针,指针变量&#xff0c;引用&#xff0c;取地址符&#xff1a; 前提 &#xff1a; 1.“ * ” 的两种用途 2." & “的两种用途 2.1&#xff1a;引用 2.2&#xff1a;取地址 补充&#xff1a; 二 : malloc(),动态申请地址空间 1.原型定义…

IEEE Transactions on Neural Networks and Learning Systems神经网络和学习系统TNNLS论文投稿须知

一、TNNLS介绍 IEEE Transactions on Neural Networks and Learning Systems作为控制领域的TOP期刊&#xff0c;2024年5月影响因子为10.4&#xff0c;虽然有些下降&#xff0c;之前五年平均影响因子为11.2&#xff0c;但依然是该领域王牌期刊&#xff0c;接收关于神经网络和相…

Python踩坑系列之使用redis报错:module ‘redis‘ has no attribute ‘Redis‘问题

一步一步往后看哦&#xff01;&#xff01;&#xff01; 纳尼&#xff0c;大伙看看这是什么情况&#xff0c;都是这么写的呢&#xff0c;为啥我这就报错了0.0 出现问题不可怕&#xff0c;解决它就完事了。 方法一、安装redis重新运行程序 pip install redis 无果&#xff0…

【kubernetes】探索k8s集群中kubectl的陈述式资源管理

目录 一、k8s集群资源管理方式分类 1.1陈述式资源管理方式&#xff1a;增删查比较方便&#xff0c;但是改非常不方便 1.2声明式资源管理方式&#xff1a;yaml文件管理 二、陈述式资源管理方法 2.1查看版本信息 2.2查看资源对象简写 2.3配置kubectl自动补全 2.4node节点…

10 - 核心对象 Switch / case

简介 在Kettle&#xff08;也称为Pentaho Data Integration&#xff0c;PDI&#xff09;中&#xff0c;Switch/Case 是一个关键的组件&#xff0c;用于根据特定条件将数据流分支到不同的路径。Switch组件评估输入数据中的某个字段&#xff0c;并将数据标记后传递给相应的Case组…