echarts 中 symbol 自定义图片
在官方文檔里面,修改標(biāo)記的圖形(symbol)的方法有三種:
一:ECharts 提供的標(biāo)記類型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘a(chǎn)rrow’, ‘none’;例:symbol: ‘pin’
二:可以通過 ‘image://url’ 設(shè)置為圖片,其中 URL 為圖片的鏈接,例:
symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg'三:可以通過 圖片base64位編碼設(shè)置圖片,例:symbol:"image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
而一般我們的圖片格式都是jpg或者png格式的,所以對于第三種方法,我們需要把jpg/png的圖片格式轉(zhuǎn)換為base64編碼,轉(zhuǎn)換工具我這里給大家提供一種:https://www.bejson.com/convert/image_to_svg/,
轉(zhuǎn)成功之后,將保存的SVG文件用文本文檔打開,如圖:我們的目標(biāo)是href后面的一大串編碼,需要注意到是,這一串編碼是很大的,我轉(zhuǎn)了幾個(gè)都達(dá)到10K左右(手打苦笑),所以如果可以,還是建議大家使用第二種方法。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的echarts 中 symbol 自定义图片的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: canal本地运行异常:class co
- 下一篇: (进阶篇)Redis6.2.0 集群 哨