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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【错误解决】使用HuggingFaceInstructEmbeddings时的一个错误

起因&#xff1a;使用huggingface构建一个问答程序时出现的问题。 错误内容&#xff1a; 分析&#xff1a; 查看代码发现&#xff0c;HuggingFaceInstructEmbeddings和sentence-transformers模块版本不兼容导致。 可以明显看到方法参数不同。 解决&#xff1a; 安装sentenc…

windows平台vcpkg安装

1. 克隆vcpkg仓库 git clone https://github.com/microsoft/vcpkg 2.运行bootstrap-vcpkg.bat下载vcpkg.exe 3.运行验证 4.使用VCPKG安装OPENSSL 5.安装成功

【静态分析】在springboot使用太阿(Tai-e)03

参考&#xff1a;使用太阿&#xff08;Tai-e&#xff09;进行静态代码安全分析&#xff08;spring-boot篇三&#xff09; - 先知社区 1. JavaApi 提取 1.1 分析 预期是提取controller提供的对外API&#xff0c;例如下图中的/sqli/jdbc/vuln 先看一下如何用tai-e去获取router…

NFT Insider #131:Mocaverse NFT市值破3.5万ETH,The Sandbox 参加NFCsummit

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members&#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、…

0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKT方案

大纲 几何结构构建点点集合线线集合面面集合几何信息集合 TypeHandlerSQL操作写入操作读取操作完整XML Mapper测试代码建表SQL总结代码参考资料 WKT全称是Well-Known Text。它是一种表达几何信息的字符串内容。比如点可以用WKT表示为POINT (3 3)&#xff1b;线可以用WKT表示为L…

uniapp使用内置的switch组件的问题

说明 开关选择器 属性说明 属性名类型默认值说明平台差异说明checkedBooleanfalse是否选中disabledBooleanfalse是否禁用不支持&#xff1a;抖音小程序、飞书小程序typeStringswitch 样式 有效值&#xff1a;switch、checkbox colorColorswitch的颜色&#xff0c;通css的co…

【Text2SQL 经典模型】X-SQL

论文&#xff1a;X-SQL: reinforce schema representation with context ⭐⭐⭐⭐ Microsoft, arXiv:1908.08113 X-SQL 与 SQLova 类似&#xff0c;使用 BERT style 的 PLM 来获得 representation&#xff0c;只是融合 NL question 和 table schema 的信息的方式不太一样&#…

响应式处理-一篇打尽

纯pc端响应式 pc端平常用到的响应式布局 大致就如下三种&#xff0c;当然也会有其他方法&#xff0c;欢迎评论区补充 将div height、width设置成100% flex布局 flex布局主要是将flex-wrap: wrap&#xff0c; 最后&#xff0c;你可以通过给子元素设置 flex 属性来控制它们的…

基于STM32实现智能风扇控制系统

目录 文章主题环境准备智能风扇控制系统基础代码示例&#xff1a;实现智能风扇控制系统 PWM控制风扇速度温度传感器数据读取串口通信控制应用场景&#xff1a;智能家居与环境调节问题解决方案与优化收尾与总结 1. 文章主题与命名 文章主题 本教程将详细介绍如何在STM32嵌入式…

Docker仅需3步搭建免费私有化的AI搜索引擎-FreeAskInternet!

简介 FreeAskInternet 是一个完全免费、私有且本地运行的搜索引擎&#xff0c;并使用 LLM 生成答案&#xff0c;无需 GPU。用户可以提出问题&#xff0c;系统会进行多引擎搜索&#xff0c;并将搜索结果合并到ChatGPT3.5 LLM中&#xff0c;并根据搜索结果生成答案。 什么是 Fr…

Windows11的这个地方暴露着你的隐私,把它关掉避免尴尬

前言 现在的电脑真的是越来越智能化&#xff01;现在有很多小伙伴都是用着Windows11的吧&#xff01;用习惯了Windows11之后&#xff0c;突然发现它还是挺顺手的。 但不知道你有没有发现&#xff0c;Windows11上面有个地方暴露着你的隐私。这个隐私可能是某个小姐姐的图片&am…

【EasyX】快速入门——消息处理,音频

1.消息处理 我们先看看什么是消息 1.1.获取消息 想要获取消息,就必须学会getmessage函数 1.1.1.getmessage函数 有两个重载版本,它们的作用是一样的 参数filter可以筛选我们需要的消息类型 我们看看参数filter的取值 当然我们可以使用位运算组合这些值 例如,我们…

sequence cache太小导致enq: SQ – contention

当业务卡的时候&#xff0c;发现大量等待事件为enq: SQ – contention&#xff0c;检查awr的top 5事件&#xff1a; sql语句对sequence的调用非常频繁&#xff1a; 对这些语句排查发现sequence cache值均为默认20&#xff0c;调大cache到1000值&#xff1a; SQL> select SE…

sql select获取mysql所有数据库,指定数据库下的所有表名

介绍一下 MySQL 8.0 中默认安装的几个系统数据库/模式。 当我们安装 MySQL 8.0 并初始化数据库之后&#xff0c;默认会创建以下系统数据库&#xff1a; mysql&#xff0c;存储了 MySQL 服务器正常运行所需的各种信息。 information_schema&#xff0c;提供了访问数据库元数据…

HarmonyOS之ArkUI布局设计常见细节

这里写目录标题 1. Button设置带有渐变色的背景图片无效1.1 问题分析1.2 成功案例 2. 路由跳转失败2.1 问题分析 1. Button设置带有渐变色的背景图片无效 1.1 问题分析 说明&#xff1a;设置颜色渐变需先设置backgroundColor为透明色。 Button($r(app.string.login), { type…

海外仓储管理系统:提升效率,标准化海外仓管理,科技赋能业务

海外仓作为跨境物流的关键一环&#xff0c;完全可以说海外仓的效率直接决定了后续物流的整体运作效率。 对于海外仓而言&#xff0c;一套高效&#xff0c;易用的海外仓储系统&#xff0c;无疑将成为提升企业竞争力的重要工具&#xff0c;帮助海外仓实现从野蛮生长到标准化管理…

项目十二:简单的python基础爬虫训练

许久未见&#xff0c;甚是想念&#xff0c;今日好运&#xff0c;为你带好运。ok&#xff0c;废话不多说&#xff0c;希望这门案例能带你直接快速了解并运用。&#x1f381;&#x1f496; 基础流程 第一步&#xff1a;安装需要用到的requests库&#xff0c;命令如下 pip inst…

网络拓扑—DNS服务搭建

文章目录 DNS服务搭建网络拓扑配置网络DNSPC 安装DNS服务配置DNS服务创建正向查找区域创建反向查找区域创建子域名 PC机DNS域名解析 DNS服务搭建 网络拓扑 为了节省我的U盘空间&#xff0c;没有用路由器&#xff0c;所以搭建的环境只要在同网段即可。 //交换机不用考虑 DNS&a…

探数API统计分享-1949年-2021年中国历年夏粮产量统计报告

​​​​​​​​中国历年夏粮产量​&#xff0c;为1949年到2021年我国每年的夏粮产量数据。2021年&#xff0c;我国夏粮产量为14596万吨&#xff0c;比上年增长2.2%。 数据统计单位为&#xff1a;万吨 。 我国夏粮产量有多少&#xff1f; 2021年&#xff0c;我国夏粮产量为1…

计算机网络安全控制技术

1.防火墙技术 防火墙技术是近年来维护网络安全最重要的手段&#xff0c;但是防火墙不是万能的&#xff0c;需要配合其他安全措施来协同 2.加密技术 目前加密技术主要有两大类&#xff1a;对称加密和非对称加密 3.用户识别技术 核心是识别网络者是否是属于系统的合法用户 …