echart的symbol自定义图片问题

echart的symbol支持自定义图片：

• 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：
'image://http://xxx.xxx.xxx/a/b.png'
URL 为 dataURI 例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

图片转成dataURL的工具可以在线搜索，这里提供
http://tu.chacuo.net/imagetodataurl
http://www.atool9.com/img2base64.php
注意：如果想要使用image://方法，有两种方式：
1.外网：将图片上传到某个网站过个人网站上，然后将图片路径粘贴到//后面
2.内网：将图片放置在项目的static文件中，可以在内网查看图片：localhost://4200//static/xxx.png,然后将链接粘贴到后面。

• 可以通过 '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'

• 矢量图标支持在阿里图标库中寻找：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
• 或者使用在线转换成矢量图片

 

1人点赞

 

echart多样化实现

 

作者：ZZH涵哥
链接：https://www.jianshu.com/p/a4cecd912bf6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。