ecahrts的symbol显示图片显示不出来或者是有方块

报错背景

nodeName: nodes[j].nodeName,
value: [x, y],
symbolSize: 50,
// alarm: nodes[j].alarm,
symbol: 'image///../../../../../assets/image/guiti.png',  //'image:///asset/get/s/' + nodes[j].img,
itemStyle: {
    normal: {
        color: '#12b5d0',
    }
}

}

我的代码使用了symbol
发现图片使用绝对路径和相对路径都不能正常实现 ,这个前缀是调用image的

修改1

symbol: 'image://../../../../../assets/image/guiti.png',

不行

修改2

“image://http://localhost:4444/src/assets/image/red.png”
发现可以,把路径改成项目路径就行,就是ip加接口,再加上图片就能获取到

注意

总之要注意的就是
第一点
路径不要使用 \ 要使用/ 因为你的鼠标点击复制的不管是相对路径还是绝对路径都是反斜杠 应该改成正斜杠/
第二点
相对路径搞不明白就使用绝对路径 ,绝对路径都不能显示就是图片路径写的方式有问题了。
第三点
因为你指定的图片很有可能会出问题,比如不能正常显示 或者是没有保存等等,可以使用你之前用过的图片试一下
第四点
有时候出现方块一个是点开图片文件看一下,有的网站下载下来的图片可能有这个bug另一个是看看是不是做了填充 如果你的svg是不封闭的可能直接被填满了 也看不出来是什么图片。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用ECharts的image标记来插入图片作为symbol。首先需要在option中定义一个image数组,然后在series中使用symbol: 'image',并指定image的索引即可。例如: option = { ... series: [{ type: 'scatter', symbol: 'image', symbolSize: 50, data: [ [10, 20, ], [20, 30, 1], [30, 40, 2] ], itemStyle: { normal: { color: '#F00' } }, // 定义image数组 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用了image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 image: [ { // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用了image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 id: , // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用了image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中的第三个元素设置为null // 例如data中的[30, 40, null]表示不使用图片作为symbol // 如果需要使用多个图片,可以在image数组中添加多个图片,然后在data中指定不同的索引即可 // 例如data中的[10, 20, ]和[20, 30, 1]表示使用不同的两个图片作为symbol // 注意:如果使用了image作为symbol,需要将symbolSize设置为图片的实际大小 // 否则图片会被缩放导致变形 // 图片路径可以是本地路径或者网络路径 // 图片大小需要提前设置好 // 图片可以是png、jpg、svg等格式 // 图片的索引即为data中的第三个元素 // 例如data中的[10, 20, ]表示使用image数组中的第个图片作为symbol // 如果不需要使用图片,可以将data中

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值