echarts图例中使用svg path

开发echarts时，经常会要求自定义icon，但是由echarts提供的icon类型比较有限，只有几种

icon: ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’

比如要实现以下格式的legend

首先使用formatter自定义图例名称

let legend = {
  itemGap: 24,
  itemWidth: 2,
  itemHeight: 16,
  top: 0,
  icon: 'rect',
  formatter: function (name) {
    let _name = [];
    switch (name) {
      case "衣服":
        _name = [`{a|${name}}`, `{b|$120.00} {c|(/件)}`].join("\n");
        break;
      case "裤子":
        _name = [`{a|${name}}`, `{b|$120.00} {c|(/条)}`].join("\n");
        break;
      case "鞋子":
        _name = [`{a|${name}}`, `{b|$120.00} {c|(/双)}`].join("\n");
        break;
    }
    return _name;
  },
// 设置样式
  textStyle: {
    rich: {
      a: {
        padding: [0, 0, 0, -10], // 用于调整距离icon的位置
        color: "rgba(54, 65, 65, 0.9)",
        lineHeight: 24,
      },
      b: {
        padding: [0, 0, 23, 0], // 用于调整距离icon的位置
        fontWeight: 'bold',
        fontSize: 16,
        color: "rgba(54, 65, 65, 1)",
      },
      c: {
        padding: [0, 0, 23, 0], // 用于调整距离icon的位置
        fontSize: 10,
        color: "rgba(54, 65, 65, 0.9)",
      }
    },
  },
  itemStyle: {
  }
}

对鞋子设置单独的icon

legend  = {
 data: Object.keys(colorMap).map(key => {
    let obj = {
      name: key,
      icon: 'rect'
    }
    if (key === '鞋子') {
      obj.icon = 'path://M448 64h128v230.3H448zM448 396.9h128v230.3H448zM448 729.7h128V960H448z'
    }

    return obj
  }),
}

这里使用的是svg的path中d的属性，接下来说下具体含义

M448 64h128v230.3H448zM448 396.9h128v230.3H448zM448 729.7h128V960H448z

# 大写的M L H V 表示绝对定位
# 小写的m l h v 表示相对定位
M 448 64 : 移动到x:448, y: 64位置（位于(448, 64)）
    h 128: 相对于448向右移动128（位于(576, 64)）
  v 230.3: 相对于64向下移动230.3（位于(576, 294.3)）
    H 448: 绝对定位到448位置（位于(448, 294.3)）
    z: 当前位置连接到起点位置，闭合

以上就完成了一个虚线啦，再来练习一下，比如要画一个十字架

 <svg>
  	<path d="M 100 1 h 50 v 50 h 50 v 50 h -50 v 50 h -50 v -50 h -50 v -50 h 50 v -50" fill="rgb(77, 154, 219)">
     </path>
 </svg>

如果实在写不出来path可以通过iconfont去找到对应的图标，复制svg代码就可以啦