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