echart中symbol使用svg_从iconfont中获取svg_svg为path d格式(方法一)

前言

使用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中