echarts 中 symbol 自定義圖片


首先我使用的技術框架的VUE,當然該方法在其他框架也是適用的,這點大家注意一下~

在官方文檔里面,修改標記的圖形(symbol)的方法有三種:

一:ECharts 提供的標記類型有 'circle''rect''roundRect''triangle''diamond''pin''arrow''none';例:symbol: 'pin'

二:可以通過 'image://url' 設置為圖片,其中 URL 為圖片的鏈接,例:symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg'

三:可以通過 圖片base64位編碼設置圖片,例:symbol:"image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"

而一般我們的圖片格式都是jpg或者png格式的,所以對於第三種方法,我們需要把jpg/png的圖片格式轉換為base64編碼,轉換工具我這里給大家提供一種:https://www.bejson.com/convert/image_to_svg/

轉成功之后,將保存的SVG文件用文本文檔打開,如圖:我們的目標是href后面的一大串編碼,需要注意到是,這一串編碼是很大的,我轉了幾個都達到10K左右(手打苦笑),所以如果可以,還是建議大家使用第二種方法。

 

版權聲明:本文為博主原創文章,轉載需注明出處。https://www.cnblogs.com/silent007/p/10825232.html 

 

***********************************    END   ***********************************


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM