echarts 自定義markpoint的樣式

 series中的markpoint樣式

ECharts提供的默認標記類型樣式：

     "circle ", "rect", "roundRect, 'triangle', 'diamond', 'pin', 'arrow', 'none'

如果自定義樣式，有以下兩種方式：

1、通過 'image://url' 設置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。 

URL 為圖片鏈接例如：

 symbol: "image://圖片地址"
 symbol:"image://https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2318012298,1118210339&fm=26&gp=0.jpg"

URL 為 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7' 

 

2、可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比於使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。

例如：

'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'
步驟1： 打開阿里圖標庫 https://www.iconfont.cn/
步驟2： 搜索要使用的圖標名，如 對話框

 

  步驟3： 下載圖標：點擊下載，下載格式為svg 

    →  

 步驟4： 

下載的結果：

<svg t="1577967477235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1714" width="200" height="200">
　　<path d="M512 85.333333l249.6 298.666667H262.4z" fill="#3F51B5" p-id="1715"></path>
　　<path d="M426.666667 320h170.666666v576h-170.666666z" fill="#3F51B5" p-id="1716"></path>
</svg>

所以矢量路徑就是d后邊的數值：M512 85.333333l249.6 298.666667H262.4z M426.666667 320h170.666666v576h-170.666666z

 

如果需要每個數據的圖形不一樣，可以設置為如下格式的回調函數：

(value: Array|number, params: Object) => string 

其中第一個參數 value 為 data 中的數據值。第二個參數params 是其它的數據項參數。

 series-line.markPoint. symbolSize 

numberArrayFunction

標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。

如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：

(value: Array|number, params: Object) => number|Array 

其中第一個參數 value 為 data 中的數據值。第二個參數params 是其它的數據項參數。

 series-line.markPoint. symbolKeepAspect 試一試

boolean

如果 symbol 是 path:// 的形式，是否在縮放時保持該圖形的長寬比。