前言
使用echarts开发一个图表,symbol是多样的,so...如果我们能使用iconfont图表库!阅读本文不需要任何svg基础知识
本文就是介绍如何从iconfont中获取svg的path,用于echarts的symbol样式.
当然使用svg的path缺点就是我们没办法修改path的方向.iconfont图片是什么方向,echarts中展示的就是什么方向.如果想要修改svg的方向,可以参考方法二:将图片通过在线编辑将png格式转化为base64,用于echarts的symbol.
这里只介绍第一个方法,第二个方法请参考:
https://www.cnblogs.com/liuXiaoDi/p/13539771.html
开发
步骤一:首先在iconfont中找到我们需要的图片,如下:选择复制或者下载svg都可以.
步骤二:在文件中粘贴svg,接着我们需要对svg进行处理(关键关键关键!!!):
获取所有的path d路径,一个svg中通常会有好几个path d,将所有的path d内容粘贴出来,拼合成如下内容结构.这有几个关键点,一般从iconfont复制的svg中,存在好几个path d,每个path d都是以“M”开头,提取出来后每段M之间用空格分割;M内也就是path d中的其他内容在iconfont中是空格,我们要转化为逗号
修正后的的路径就如下,我们将这段代码复制到echart的symbol中
步骤三:完成!
在图表中我们可以看到对应的symbol了
总结
大致分为:从iconfont中获取svg,处理svg的path d为echarts识别的格式,放到echarts的symbol中