echarts 地图自定义图标Symbol 及其颜色

2022-4-27 补充

1. 我写的是针对 svg 复合路径，为什么要合并为单路径？因为多路径似乎是没法变色的
2. 至于单路径的，直接把 path 粘进去就可以了
3. 至于完整代码，如果你是有使用过echarts地图，你有翻阅过scatter系列的文档，你就不会提出这种问题
4. 对于这个功能，我是从没想过，对svg和echarts不熟悉的人能看懂

官方文档

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

如果需要每个数据的图形不一样，可以设置为如下格式的回调函数：

(value: Array|number, params: Object) => string

其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。

说明

其实官方文档已经很明白了，return 一个 path:// 的svg 的路径即可

我这主要说的是SVG 复合路径：

SVG 复合路径

1. 我们可以从 iconfont 下载 想要的 svg 图标
2. 打开 Adobe Illustrator CS6
3. 鼠标点击选取整个图标：上方菜单（对象 -》 复合路径 -》建立 （因为我用了中文的，英文自己找找咯
4. 导出 svg 格式，以文本打开 svg，将 <path 的 d 属性复制
5. 复制后放入 symbol 中，前面加以 path://

这样 color 便能设入图标了

 itemStyle: {
    normal: {
      	color: '#1890ff'
    }
}