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;指令和数据 编译链接完成之后会产生一个可执行…

python毕设项目选题汇总(全)

各位计算机方面的毕业生们&#xff0c;是不是在头疼毕业论文写什么呢&#xff0c;我这给大家提供点思路&#xff1a; 网站系统类 《基于python的招聘数据爬虫设计与实现》 《基于python和Flask的图书管理系统》 《基于照片分享的旅游景点推荐系统》 《基于djangoxadmin的学生信…

LeetCode hot100-47-N

105. 从前序与中序遍历序列构造二叉树给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。这题放选择题里还能选出来&#xff0c;前序中序一起确定了一颗什…

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

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

贪心算法:合并区间

参考资料&#xff1a;代码随想录 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 做过用最少数量的箭引爆气球和无重叠区间这两道题目后&#xff0c;题意和题解都不难理解。唯一的一点儿难点是对于api的运用。 class Solution {public int[][] merge(int[][…

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

在现代企业快速发展、智能化运营过程中&#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…

仙乐健康科技股份有限公司「E立方仿生增效技术平台」推出新品啦

在这个看脸的颜值经济时代,很多女性将肌肤保养作为人生的“必修课”,从各种网上攻略到高端护肤品,再到美容院的专业护理,可以说是应有尽有。最近,仙乐健康科技股份有限公司「E立方仿生增效技术平台」推出的新品——PQQ盐胶原小分子肽桦树汁饮品,就受到了颇多追求健康美人士的关…

svg中渐变色的应用

设置渐变色背景 在 SVG 中可以使用<linearGradient>或<radialGradient>元素来设置渐变背景色。以下是一个简单的示例&#xff1a; <svg width"400" height"400"><defs><linearGradient id"myGradient"><stop…

Discord运营攻略 | 从0-1教你搭建用户社区!

Discord&#xff0c;这个最初为游戏爱好者设计的通讯平台&#xff0c;现在已经发展成为了一个多元化的社区聚集地&#xff0c;涵盖了各种兴趣和行业。如果你是一名社媒运营人员&#xff0c;正在考虑如何从零开始构建一个充满活力的Discord用户社区&#xff0c;那么你来对地方了…

【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-…

38. 外观数列 - 力扣(LeetCode)

基础知识要求&#xff1a; Java&#xff1a;方法、for循环、if eles语句、StringBuilder类 Python&#xff1a; 方法、for循环、if else语句、字符串拼接 题目&#xff1a; 「外观数列」是一个数位字符串序列&#xff0c;由递归公式定义&#xff1a; countAndSay(1) "…

记录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;给汽车开发带来了成本与时间…