echarts 中 symbol 自定义图片

最新推荐文章于 2024-11-12 15:48:19 发布

weixin_30883311

最新推荐文章于 2024-11-12 15:48:19 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/silent007/p/10825232.html

博客介绍了在VUE框架下修改ECharts标记图形的方法。官方文档中有三种方法，一是使用ECharts提供的标记类型；二是设置为图片链接；三是设置图片，但需将jpg/png格式转换为base64编码。因编码较大，建议优先使用第二种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我使用的技术框架的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左右（手打苦笑），所以如果可以，还是建议大家使用第二种方法。