echarts 中 symbol 自定義圖片
2022-09-06 22:35:32

在官方文檔里面，修改標(biāo)記的圖形（symbol）的方法有三種：

一：ECharts 提供的標(biāo)記類型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘a(chǎn)rrow’, ‘none’；例：symbol: ‘pin’

二：可以通過(guò) ‘image://url’ 設(shè)置為圖片，其中 URL 為圖片的鏈接，例：

symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg'

三：可以通過(guò) 圖片base64位編碼設(shè)置圖片，例：??symbol:"image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"??

而一般我們的圖片格式都是jpg或者png格式的，所以對(duì)于第三種方法，我們需要把jpg/png的圖片格式轉(zhuǎn)換為base64編碼，轉(zhuǎn)換工具我這里給大家提供一種：??https://www.bejson.com/convert/image_to_svg/??，

轉(zhuǎn)成功之后，將保存的SVG文件用文本文檔打開(kāi)，如圖：我們的目標(biāo)是href后面的一大串編碼，需要注意到是，這一串編碼是很大的，我轉(zhuǎn)了幾個(gè)都達(dá)到10K左右（手打苦笑），所以如果可以，還是建議大家使用第二種方法。