详解 ECharts 图例图标（legend.icon）自定义的几种方法

ECharts 图例图标（legend.icon）自定义概述

ECharts 图例图标（legend.icon）是用来表示图例项的图形标记。它可以是内置的图标，也可以是自定义的图标。自定义图标可以使图例更加个性化，更能满足用户的需求。

ECharts 图例图标（legend.icon）自定义方法

ECharts 图例图标（legend.icon）的自定义方法主要有三种：矢量路径、图片和 HTML。

1. 矢量路径

矢量路径是一种使用数学公式来图形轮廓的方法。它可以生成清晰、锐利的图形，并且可以任意缩放而不失真。

要使用矢量路径自定义 ECharts 图例图标（legend.icon），可以使用 path:// 协议。path:// 协议后面跟的是一个矢量路径字符串。矢量路径字符串可以使用 SVG（可缩放矢量图形）格式或 ZRender 的路径格式。

示例：

legend: {
    icon: 'path://M0,10 L10,10 L10,0 Z'
}

这个示例代码使用了一个简单的 SVG 路径来定义一个三角形的图标。

2. 图片

图片是一种常见的自定义 ECharts 图例图标（legend.icon）方法。图片可以是任何格式，如 PNG、JPG、GIF 等。

要使用图片自定义 ECharts 图例图标（legend.icon），可以使用 image:// 协议。image:// 协议后面跟的是一个图片的 URL。

示例：

legend: {
    icon: 'image://https://echarts.apache.org/examples/assets/img/echarts-logo.png'
}

这个示例代码使用了一个 ECharts 官方的 logo 图片作为图例图标。

3. HTML

HTML 是一种用来网页内容的语言。它可以用来创建各种各样的图形和效果。

要使用 HTML 自定义 ECharts 图例图标（legend.icon），可以使用 html:// 协议。html:// 协议后面跟的是一个 HTML 代码片段。

示例：

legend: {
    icon: 'html://<svg width="20" height="20"><circle cx="10" cy="10" r="10" fill="#f00" /></svg>'
}

这个示例代码使用了一个简单的 HTML 代码片段来定义了一个红色的圆形图标。

结语

ECharts 图例图标（legend.icon）的自定义方法有很多，本文介绍了其中三种最常用的方法。希望读者能够根据自己的需求选择合适的方法来自定义图例图标。