博主开发有个习惯，会苛求自己尽量还原UI设计的图。这些年开发经常会做图表，echarts用得比较多，其中的图例 图标 (legend.icon) 样式自定义现在分享一下，毕竟独乐乐不如众乐乐。

看完再评价，简单的图例 到底有啥好分享的

可先查看 echarts 官方配置项 地址

circle, rect, roundRect, triangle, diamond, pin, arrow, none

分别对应以下几种图标

none 就是没有的意思，上面就没放出来了

图片转base64 在线工具 地址

图片使用前缀为 image://

示例如下：

效果如下 这种方式，能自定义任意UI设计的图标，但是不支持动态置灰，无法跟随默认图表数据颜色

推荐使用方式

按照博主理解，echarts 默认的几个图例 icon 都是使用 了 矢量路径 的方式 那么矢量路径到底是什么，我们下面来看看。

我们最常见到的 svg 图片 里面的形状就是使用 矢量路径绘制

echarts 使用 矢量路径 写法前缀为：path://

效果如下 1.可以看到 图例 icon 变成了空心六边形，并且icon 颜色与图表中的 块儿 颜色对应上的

即使图表块儿设置了渐变色，图例 图标也能完成呈现渐变色彩

2.并且 echarts 5 中的 给有辨色障碍 人士预备的 无障碍花纹也能看到（当前图标存在空心，所以不明显） 3.再者 点击图例 取消显示 置灰效果也能应用置 图标上，这是 使用 图片链接或者base64 达不到的效果 简单来讲就是，使用 矢量路径， 显示效果与默认的几个图标一样，只是图标形状变成了自定义。

矢量路径也支持 复合路径，比如：

第二个图标中 圆环 与 矩形块 拼接的 复合路径

由于我较常用的导出矢量路径方式，是使用Adobe Ilustrator 正常情况下找 UI 小姐姐帮忙即可

不会使用 adobe ilustrator 的，可以去 https://www.iconfont.cn/ 阿里图标库，找到你要的图标

这里预览的就是 svg ，也可以直接复制这里的 path 标签的 d 属性就是。

想要学习简单的 编辑并导出 矢量路径可以接着看下面 同样有些坑，即使是上方简单的复合路径图形，初入行的UI 可能也不知道

点击查看图例更改 图标 自定义 demo

在 demo 内点击编辑源码，查看

博主对 平面有一点经验，所以使用的是 Adobe Ilustrator，会其他工具小伙伴可以使用其他的

首先使用 gif 图演示

1.首先创建一个文件

2.选择图形工具，随便画一个图形

3.设置 图形 边框宽度，再点击 对象 => 路径 => 轮廓化描边，这样刚才的粗边框，就变成了一个五星环

4.再右击图形，取消编组，使用选择工具（左侧菜单第一个箭头）选择中心的小五角星缩小

注：缩小后可以不用 设置颜色的，毕竟这里导出的颜色没有任何作用，我们只用到了路径

5.再一起选中五星环，点击 对象 => 路径 => 复合路径 => 建立 菜单（这个很重要，如果不建立复合路径，那么最后导出就是两个形状拼接的，而不是一个形状，初入行的UI，可能不在意这些，但是echarts 矢量路径只支持一个路径）

6.再点击 文件 => 脚本 => 导出svg ，打开svg 文件（默认是浏览器打开的）

7.最后审查元素，看到svg 标签内有一个 path 标签 d 属性内就是我们需要的 矢量路径

创建复合路径导出的svg:

不创建复合路径导出的svg:

以上两个五角星，代码以及svg 源文件都展示出来了

除了可以看上方贴出来的代码，也可以直接打开控制台审查元素

会发现未建立复合路径的五角星，五角环 与 中间小五角星是分成两个元素渲染的

折线 symbol 也支持，点击查看Demo

当然不仅仅只是这些，handle.icon （滚动条）、toolbox.icon （工具图标） 等都支持，大家使用到时，就可以用上面的方式使用矢量路径了。

原本想找个在线版编辑路径的工具，无奈只找到PS在线版，AI 没找到，有找到的小伙伴可以在下方留言

以上信息如有疏漏或错误欢迎指正