图例自定义图标

默认图标

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

legend: {
    top: '5%',
    left: 'center',
    itemWidth: 20,
    itemHeight: 20,
    data: [
        {icon: 'circle', name: '搜索引擎'},
        {icon: 'rect', name: '直接访问'},
        {icon: 'roundRect', name: '邮件营销'},
        {icon: 'triangle', name: '联盟广告'},
        {icon: 'diamond', name: '视频广告'},
        {icon: 'pin', name: 'SEO'},
        {icon: 'arrow', name: '定点投放'}
    ]
}

分别对应以下几种图标

使用图片链接

legend: {
   top: '5%',
   left: 'center',
   itemWidth: 30,
   itemHeight: 30,
   data: [
      {icon: 'image://https://profile.csdnimg.cn/F/0/1/3_rudy_zhou', name: '搜索引擎'},
   ]
}

效果如下

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

矢量图路径

legend: {
    top: '5%',
    left: 'center',
    itemWidth: 20,
    itemHeight: 20,
    icon: 'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z'
}

效果如下

创建矢量图并导出

Adobe Ilustrator 创建矢量图

www.iconfont.cn/ 阿里图标库

• 首先创建一个文件

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

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

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

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

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

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

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