更换迁徙图的图标icon

已于 2023-05-17 17:54:08 修改
阅读量412 收藏 2
点赞数 1
分类专栏： echarts 文章标签： 前端
于 2021-08-12 11:51:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_liYao/article/details/119638776
版权

想要实现的效果 如图：
在这里插入图片描述
echarts上设置
把原先的矢量图地图 path = ‘path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z’

更改为 ‘image://图片地址’
如图：在这里插入图片描述
在官方文档上有多种方法可设置icon
在这里插入图片描述
其中的symbol:“circle” 默认圆形在这里插入图片描述

symbol:"rect" // 矩形

在这里插入图片描述

symbol:"roundRect" // 圆角矩形

在这里插入图片描述

symbol: "triangle" //  三角形

在这里插入图片描述

symbol: "diamond" // 菱形

在这里插入图片描述

symbol: "pin" // 类似大头针

在这里插入图片描述

symbol: "arrow" // 小箭头

在这里插入图片描述

symbol:"none" // 没有任务图标

在这里插入图片描述

快乐的小脑虎
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度 Echarts 地图->模拟迁徙，实现自动切换地图
cj_zyz的博客
08-02 1万+
百度 Echarts 地图->模拟迁徙，实现自动切换地图 刚好有个项目，然后前端找了这个百度的echarts地图，领导说好，然后说要让它自动切换地图，就丢给我了。。。不过还好，做出来了。可惜的是，效果是实现了，最后却被更高级的领导pass掉，但决定写下这篇博客，或许能帮到有
echarts在坐标线一端或两端加箭头
乌云和闪电在雨天里重逢
05-13 2445
以下演示在横坐标线上加箭头 xAxis:{ axisLine:{ lineStyle:{ color:'#7078FF', }, symbol:['none','arrow'],//箭头一端没效果,一端箭头 symbolSize:[7,10], symbolOffset:[0,8] }, }, symbol值为’none’两端无箭头 symbol值为[‘none’,‘a
关于怎么在echarts飞机迁移图中换掉飞机图标
热门推荐
just__zhouzhou的博客
05-24 1万+
其实这个在API文档中也有写到，但也是花费我一些时间修改的，所以就小小的记录下：官方的例子显示的迁移图：然后我们可以在js代码中找到以下代码：var 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...
使用canvas画迁徙线并加上动态效果与小飞机图标
xt_XiTu的博客
01-21 1275
首先在页面中放上地图图片，并建立三个canvas标签，分别用于点、迁徙线、动态效果 <div class="mapBox"> <div class="map"> <img src="@/assets/shanxi.svg" alt=""> </div> <!-- 线 --> <canvas id="canvas" class="canvas"></c
echarts线条增加箭头动画
weixin_42112451的博客
08-17 4088
正常连接的echarts线条是没有动画效果的。需要增加在原有series数组中增加一个对象。 { name: 'text', type: 'lines', coordinateSystem: 'cartesian2d', // 笛卡尔坐标系 edgeSymbol: ['circle', 'arrow'], // polyline: true, effect: { show: true,
百度地图+eChart实现动态迁徙图
05-29
具体效果详见本人博客文章。
echarts迁徙图
01-17
用echarts做感兴趣的可以的迁徙图，感兴趣的可以凑活看看
echarts迁徙图所需的所有JS文件
08-01
echarts做中国迁徙图需要的所有JS文件，包括了china.js，以及省份zhejiang.js等全国所有省份对应的JS文件，还包括了echarts.min.js。做echarts迁徙图，全程无忧。
基于SuperMap的Echarts迁徙图
09-18
基于SuperMap的Echarts迁徙图，详尽的系统源码。可预览的系统例子。喜欢的朋友们能，在此基础之后扩展自己的应用。希望大家学习愉快。乐于分享，乐于开源。
71.（leaflet篇）leaflet流入迁徙图（canvas技术）.zip
02-21
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/123040900
Echarts自定义地图和添加图标
白豆腐大大的博客
11-28 6825
Echarts自定义地图和添加图标
echarts 中 参数的详讲
aocheqing0591的博客
08-08 284
xAxis 属性 xAxis : [ { type : 'category',//坐标轴类型 // show:'',//是否显示 x 轴 //id:'',组件 ID。默认不指定。 //gridIndex :'',x 轴所在的 grid 的索引，默认位于第一个 grid ogridIndex :'',//ffset:'',//X 轴相对于默认位置的偏移，在相同的...
echarts实现左右滑动
huhuhuja
12-22 6969
1.内置滑动 dataZoom: [ { type: "inside", //slider表示有滑动块的，inside表示内置的 show: false, xAxisIndex: 0, start: 50, end: 100, }, ] 2.底部有滑动块 dataZoom: [ { ...
Vue（二）：ECharts、高德地图-实现经纬度动态箭头指向飞线图
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
11-25 3938
准备 npm i echarts-extension-amap import "echarts-extension-amap"; npm i echarts import echarts from "echarts"; npm i @amap/amap-jsapi-loader import AMapLoader from "@amap/amap-jsapi-loader"; 展示 完整代码 <template> <div class="home">
Echarts3 关系图-力导向布局图
weixin_30509393的博客
12-01 958
因为项目需要，要求实现类似力导图效果的图，我就瞄上了echarts。 注意事项1：由于我的项目要部署到内网，所以js文件要在本地，网上大多力导图都是echarts2的，而其又依赖zrender基础库，下载的echarts2是2.2.7版本，但是去zrender官网下载的2.1版本，用起来说版本最低要求2.1.1,下载最新又提示缺少文件，引用网页js反而没事儿，于是只能选择echarts3了。 ...
vue2使用echarts markLine中的symbol引入png图片路径问题解决过程
weixin_30822451的博客
05-06 1426
在刚刚的开发中有个需求，需求是这样的：需要一条markLine标记线，标记线的顶端形状为实心箭头，且颜色和markLine标记线颜色不一致，这个箭头的方向会有一个接口返回的参数控制箭头在markLine标记线的首端还是末端， 如下图所示： 刚开始用的是echarts提供的默认配置（ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'trian...
自定义设置echarts的legend图标
个人博客
04-26 4698
重点介绍使用svg的方法
echart的symbol自定义图片问题
zhao_66的博客
12-28 2506
echart的symbol支持自定义图片： 可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。 URL 为图片链接例如： ‘image://http://xxx.xxx.xxx/a/b.png’ URL 为 dataURI 例如： ‘image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSK...
echarts 中 symbol 自定义图片
Gblfy_Blog
10-27 4136
在官方文档里面，修改标记的图形（symbol）的方法有三种： 一：ECharts 提供的标记类型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’；例：symbol: ‘pin’ 二：可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，例： symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.
echarts 迁徙图
最新发布
07-28
Echarts迁徙图是一种数据可视化图表，用于展示不同地区之间的人口迁徙、物流运输等情况。根据引用\[2\]中提到的案例，可以使用Echarts库来实现迁徙图效果。首先，需要在前端代码中引入Echarts库和相关的JavaScript文件。引用\[3\]中给出了一个简单的前端代码示例，其中包括了引入Echarts库和创建一个用于绑定Echarts图表的容器。在这个容器中，可以使用JavaScript代码来配置和绘制迁徙图。 具体实现迁徙图的步骤如下： 1. 引入Echarts库和相关的JavaScript文件，确保它们在页面中正确加载。 2. 创建一个用于绑定Echarts图表的容器，可以使用一个div元素，并给它一个唯一的id。 3. 使用JavaScript代码来配置和绘制迁徙图。可以通过调用Echarts提供的API来设置图表的样式、数据和交互行为。具体的配置可以根据需求进行调整，例如设置地图的样式、添加迁徙线、设置数据等。 需要注意的是，为了实现迁徙图效果，可能需要使用到地图数据。根据引用\[1\]中提到的，可以使用高德的全国json数据来注册地图数据。具体的使用方法可以参考Echarts官方文档提供的示例和说明。 总结起来，要实现Echarts迁徙图，需要在前端代码中引入Echarts库和相关的JavaScript文件，创建一个用于绑定图表的容器，并使用JavaScript代码来配置和绘制迁徙图。可以根据需求调整配置和样式，同时可能需要使用地图数据来注册地图。 #### 引用[.reference_title] - *1* [echarts：迁徙图](https://blog.csdn.net/sinat_36226553/article/details/117326707)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Echarts迁徙图简单图片实现](https://blog.csdn.net/weixin_60703114/article/details/123476837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值