echarts 自定義markpoint的樣式
阿新 • • 發佈:2020-11-02
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'
如果需要每個資料的圖形不一樣,可以設定為如下格式的回撥函式:
(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://
的形式,是否在縮放時保持該圖形的長寬比。