echarts地图中散点图的symbol使用自定义图片

最新推荐文章于 2024-09-04 18:32:44 发布
最新推荐文章于 2024-09-04 18:32:44 发布
阅读量6.5k 收藏 14
点赞数 5
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50441807/article/details/125945032
版权 
series: [
  {
    type: 'scatter',
    geoIndex: 0,
    coordinateSystem: 'geo',
    hoverAnimation: false,
    symbolSize: 78,
    symbol: 'image://' + require('@/assets/border.png'),  // require引入图片路径
    label: {
      show: true,
      color: '#00e5ff',
      offset: [0, 0],
      fontSize: 26
    },
    data: [
      {
        name: '阳泉',
        value: [113.57, 37.85]
      },
      {
        name: '湖州',
        value: [120.1, 30.86]
      }
    ],
    zlevel: 3
  }
]

效果图：
在这里插入图片描述

小智玩前端
关注
echart的symbol自定义图片问题
zhao_66的博客
12-28 2642
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 自定义图片
weixin_30883311的博客
05-07 1万+
首先我使用的技术框架的VUE，当然该方法在其他框架也是适用的，这点大家注意一下~ 在官方文档里面，修改标记的图形（symbol）的方法有三种： 一：ECharts 提供的标记类型有'circle','rect','roundRect','triangle','diamond','pin','arrow','none'；例：symbol: 'pin' 二：可以通过'image...
echarts散点图的圆点设置成不同的自定义图片且使用本地静态资源图片的写法
weixin_52443895的博客
09-19 904
首先举个栗子，假设有个echarts散点图，以下是他的optionsxAxis: {min: 0,max: 1000,},yAxis: {min: 0,max: 1000,},series: [z: 99,label: {normal: {},normal: {label: {},
自定义echarts 选中数据展示样式
最新发布
weixin_44601930的博客
09-04 476
【代码】自定义echarts 选中数据展示样式。
ECharts 柱状图上显示数据，并自定义图标
热门推荐
Little_Pig_Bug的博客
09-26 2万+
先看效果 1.柱状图上显示数据，使用的是series[0].label.formatter series: [{ name:'近一周每日', type: 'bar', barGap: '0', label: { normal: { show: true, formatter: '{c}%', ...
echarts散点图自定义图标symbol
coconut18061的博客
07-14 3792
默认标记就不说了，主要是下面的：1）可以通过设置为图片，其中 URL 为图片的链接，或者dataURI。但因为我是内网开发肯定没链接图，换一个，2）可以通过'path://'将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见。可以从 Adobe Illustrator 等工具编辑导出。
echarts地图symbol自定义图片
qq_36648885的博客
11-24 2271
在echarts制作的地图里，很多时候需要在地图上加小图标，那么他自定义的图标是在symbol里面定义的，但是有很多时候我们想用自己自定义的图标，这个时候该如何表示呢？ symbol:'image://'+require('./img/water.png'),require里面是图片的路径，这样，一个自定义图标的地图就做好啦，有需要的小伙伴可以试试哦 ...
echarts的symbol使用本地图片
coldriversnow的专栏
03-05 4090
import aj1 from '@/assets/img/aj1.png'; import aj2 from '@/assets/img/aj2.png'; var img = { a: aj1, b: aj2, } var value = 1; // >0 //生成 let option= { grid: { left: "0%", .
Echarts中symbol自定义图片问题
weixin_44408190的博客
09-02 4085
使用echarts实现网络拓扑图，想把节点换成自定义图片，搞了一晚上总算解决，记录一下。 最简单的解决方式 阿里图标库中查找想要的矢量图片：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 点击下载svg格式然后放入你想存放的位置 然后使用 symbol: 'image://./img/xxx.svg**’**格式 （我存放的图片路径是在项目中WebContent/img中，所以我写的是 symbol: ‘image://./im
echarts散点图的散点用自定义图片替代
榕城候佳人的博客
03-16 1229
base64图片转换工具，是一款可以在线任意图片格式转Base64 DataUrl编码工具,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。要实现不同的点对应不同的图片，只需要在series中每个symbol设置不同dataURI即可。总结一下，就是先把图片转换成dataURI，然后在series中的symbol写上即可。base64图片在线转换工具 - 站长工具。
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
caixuanji的博客
07-29 1万+
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
echarts的折线图使用自定义图片设置symbol
weixin_43794766的博客
09-10 4494
1,首先定义变量指向图片路径，注意：使用require const ImgIcon = require("图片路径"); 2.在series里面设置：symbol:`image://${ImgIcon}`;
echarts散点图加图片
ml1658503的博客
09-05 1530
在echarts散点图上加图片
echarts地图添加图片
前端开发-陈善强
11-24 2809
需求：地图的各区域添加图标 解决方案： 通过散点图与地图的结合，为地图添加上图片； option: { geo: [ { map: 'xx省',//要显示地图的地区名 roam: false, zlevel: 1, zoom: 1.2, label: { normal: { ...
vue3+echarts地图自定义图片
lbchenxy的博客
05-20 1187
最近搞echarts搞的要起飞了。 上边文章已经说了基本地图的功能实现，下边开始自定义图片,样式如下 我们需要对已经存在的资源池进行地区的显示。百度了之后发现代码都没实现成功，应该是我的写法，或者我没抄对吧。还是看看文档自己思考吧。 官网介绍传送门 完整代码 需要给myMap增加固定的高和宽 <div id="myMap" ref="myMap" class="border"></div> <script> import { defineComponent, r
vue中使用echarts全国地图绘制加入散点图及自定义图片
weixin_45654184的博客
08-27 4572
移动端效果图如下 散点为统计数量，根据不同数量显示不同颜色散点及不同大小，而自定义图片则为用户头像。 参考官方文档为https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 首先引入加入echarts标签 <div:style="{height:'8rem',width:'100vw'}"ref="myEchart"></div> 引入echarts importechartsfrom...
echarts 地图自定义图标_echarts自定义图标的点击事件怎么添加
06-02
要为 echarts 地图自定义图标添加点击事件，可以通过以下步骤实现： 1. 在 echarts 中使用自定义图标，可以通过在 series.data 中设置 symbol 属性为自定义图标的路径来实现。例如： ``` series: [{ type: 'scatter', coordinateSystem: 'geo', symbol: 'image://path/to/custom/icon.png', data: [ {name: '北京', value: [116.46, 39.92]}, {name: '上海', value: [121.48, 31.22]}, {name: '广州', value: [113.23, 23.16]}, {name: '深圳', value: [114.07, 22.62]} ] }] ``` 2. 监听 echarts 的 click 事件，可以通过 echarts.on() 方法来实现。例如： ``` myChart.on('click', function (params) { console.log(params); }); ``` 3. 在 click 事件中判断点击的元素是否为自定义图标，可以通过判断 params.componentType 和 params.data.symbol 属性来实现。例如： ``` myChart.on('click', function (params) { if (params.componentType === 'series' && params.data.symbol === 'image://path/to/custom/icon.png') { // 在这里执行自定义图标的点击事件 } }); ``` 注意：以上代码仅为示例，具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值