在echarts象形柱图中要使用自定义的图片有三种格式,如下图:
前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下:
-
我们可以去阿里巴巴矢量图标库找到自己想要的图标,移入图标,点击下载按钮小图标
-
点击复制svg代码
3. 把复制到的代码粘贴到文档或者记事本里面,path
标签里面的d属性值复制
4. 将复制出来的字符串前面加上path://
组成所需要的矢量路径
最终
‘path://M812.032 119.808q50.176-5.12 87.552 8.192t62.464 37.376 36.352 55.808 7.68 62.976-21.504 59.392-51.712 44.544q-45.056 22.528-88.064 40.448t-82.432 29.696-73.216 15.872-60.416-2.048q-13.312 61.44-22.528 134.656t-9.216 150.016q0 35.84 1.536 71.68t3.584 65.536q2.048 33.792 5.12 65.536l-149.504 0q1.024-19.456 3.072-51.2 1.024-26.624 2.048-69.632t1.024-105.472q0-79.872 10.24-152.576t23.552-131.072q-39.936 9.216-84.992-1.024t-90.112-34.304-87.04-59.392-74.752-76.288q-21.504-26.624-28.672-53.248t-2.56-52.224 18.432-48.128 32.256-40.96q16.384-15.36 38.912-23.552t48.64-9.216 53.248 4.096 52.736 16.384q25.6 12.288 54.784 33.28t56.32 48.128 50.176 57.856 38.4 61.44q16.384-28.672 43.008-54.784t58.88-46.592 67.584-34.304 69.12-16.896z’
放入echarts图中就变成我们想要的小图标啦,可以进行颜色、大小、透明度进行设置