自定义设置echarts的legend图标

永远不会太晚

已于 2022-04-26 12:44:55 修改

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签：前端 javascript

于 2022-04-26 12:42:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42611074/article/details/124425120

echarts 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用自定义图标，包括通过URL设置图片和使用SVG矢量路径的方式。SVG路径允许无损缩放且颜色可自定义，提供了更优的图形体验。你可以从Iconfont获取SVG代码，然后将其转换为'path://'格式用于显示。示例中展示了如何创建一个由多个SVG path组成的图标，并应用于图例展示。

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

1.先来看看官网

自定义图标有两种方式

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 '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'

2.图片的方式不用多说，来介绍下使用svg的方式

非常简单
前往iconfont复制想要图标的svg代码
在这里插入图片描述

得到的svg代码往往是多个path
如：

<svg t="1650946851546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10631" width="81" height="81"><path d="M504.939 387.55c4.557 0 9.114 0 13.671 0 0.318 0.157 0.625 0.408 0.956 0.452 6.038 0.802 12.128 1.319 18.113 2.415 15.408 2.818 29.512 8.984 42.553 17.55 8.902 5.845 17.217 12.442 24.037 20.719 3.582 4.347 7.24 8.657 10.49 13.252 5.62 7.943 9.932 16.6 13.466 25.688 4.969 12.772 7.402 26.033 8.176 39.627 0.239 4.189-0.138 8.425-0.439 12.625-0.349 4.861-0.565 9.772-1.472 14.543-2.535 13.351-6.907 26.073-13.565 38.002-7.259 13.004-16.55 24.265-27.741 34.063-6.36 5.569-13.249 10.334-20.591 14.432-13.915 7.765-28.76 12.787-44.639 14.608-1.868 0.215-3.714 0.612-5.571 0.922-6.914 0-13.828 0-20.742 0-0.318-0.157-0.623-0.404-0.956-0.453-5.717-0.837-11.537-1.234-17.136-2.555-11.395-2.688-22.315-6.761-32.549-12.571-8.832-5.015-17.045-10.91-24.394-17.87-4.56-4.317-8.703-9.128-12.663-14.018-8.641-10.672-15.089-22.6-19.616-35.583-3.724-10.676-6.242-21.639-6.645-32.908-0.295-8.239 0.19-16.548 0.935-24.771 0.497-5.468 1.974-10.862 3.177-16.251 2.557-11.46 7.528-21.98 13.493-31.954 6.804-11.38 15.451-21.313 25.545-29.987 7.469-6.413 15.582-11.797 24.29-16.341 7.52-3.922 15.391-6.994 23.561-9.19 8.122-2.182 16.369-3.817 24.834-3.997 0.48-0.007 0.952-0.293 1.427-0.451z" fill="#707070" p-id="10632"></path><path d="M817.704 536.406c-120.010 0-240.023 0-360.831 0 0-16.918 0-33.293 0-51.028 120.283 0 240.559 0 360.831 0 0 17.009 0 34.017 0 51.028z" fill="#707070" p-id="10633"></path><path d="M229.67 487.042c111.818 0 223.631 0 336.202 0 0 15.862 0 31.213 0 47.839-112.075 0-224.137 0-336.202 0 0-15.948 0-31.893 0-47.839z" fill="#707070" p-id="10634"></path></svg>

那么只需要使用;分隔，格式为'path://...;path://...;path://...'
...为每个path的d里的内容

3.示例：一个图-线的icon

在这里插入图片描述

  legend: {
    icon: 'path://M504.939 387.55c4.557 0 9.114 0 13.671 0 0.318 0.157 0.625 0.408 0.956 0.452 6.038 0.802 12.128 1.319 18.113 2.415 15.408 2.818 29.512 8.984 42.553 17.55 8.902 5.845 17.217 12.442 24.037 20.719 3.582 4.347 7.24 8.657 10.49 13.252 5.62 7.943 9.932 16.6 13.466 25.688 4.969 12.772 7.402 26.033 8.176 39.627 0.239 4.189-0.138 8.425-0.439 12.625-0.349 4.861-0.565 9.772-1.472 14.543-2.535 13.351-6.907 26.073-13.565 38.002-7.259 13.004-16.55 24.265-27.741 34.063-6.36 5.569-13.249 10.334-20.591 14.432-13.915 7.765-28.76 12.787-44.639 14.608-1.868 0.215-3.714 0.612-5.571 0.922-6.914 0-13.828 0-20.742 0-0.318-0.157-0.623-0.404-0.956-0.453-5.717-0.837-11.537-1.234-17.136-2.555-11.395-2.688-22.315-6.761-32.549-12.571-8.832-5.015-17.045-10.91-24.394-17.87-4.56-4.317-8.703-9.128-12.663-14.018-8.641-10.672-15.089-22.6-19.616-35.583-3.724-10.676-6.242-21.639-6.645-32.908-0.295-8.239 0.19-16.548 0.935-24.771 0.497-5.468 1.974-10.862 3.177-16.251 2.557-11.46 7.528-21.98 13.493-31.954 6.804-11.38 15.451-21.313 25.545-29.987 7.469-6.413 15.582-11.797 24.29-16.341 7.52-3.922 15.391-6.994 23.561-9.19 8.122-2.182 16.369-3.817 24.834-3.997 0.48-0.007 0.952-0.293 1.427-0.451z,path://M817.704 536.406c-120.010 0-240.023 0-360.831 0 0-16.918 0-33.293 0-51.028 120.283 0 240.559 0 360.831 0 0 17.009 0 34.017 0 51.028z;path://M229.67 487.042c111.818 0 223.631 0 336.202 0 0 15.862 0 31.213 0 47.839-112.075 0-224.137 0-336.202 0 0-15.948 0-31.893 0-47.839z',
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },