首页 前端知识 echarts中自定义图片的矢量路径

echarts中自定义图片的矢量路径

2024-04-09 23:04:14 前端知识 前端哥 10 129 我要收藏

在echarts象形柱图中要使用自定义的图片有三种格式,如下图

自定义图片的三种格式
前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下

  1. 我们可以去阿里巴巴矢量图标库找到自己想要的图标,移入图标,点击下载按钮小图标
    在这里插入图片描述

  2. 点击复制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图中就变成我们想要的小图标啦,可以进行颜色、大小、透明度进行设置
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4717.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!