【ECharts】视图高级icon的定制
在设计散点图、折线图时，如果想要使视图的视觉效果更加丰富，可以在视图中添加具有不同含义的icon。但是，若我们对该icon有一些附加的需求：
- 图标颜色需要能够动态与数据相匹配
- 视图上、tooltip上和legend上的icon要能保持统一
- 最好利于二次编辑，比如svg格式（此处从 iconfont (opens new window) 下载一个：
）
那么，在ECharts中的应用就有一些小麻烦要解决。
已知，除了官方预置的几种可选icon以外，echarts还提供了通过 [image://url](image://url) 设为图片的方式。这个URL可以是图片的链接，或者 dataURI。这里，选择dataURI。
dataURI可以是image://开头的base64格式路径，也可以是以path://开头的矢量路径。
其中，使用矢量路径的好处是：
- 不用担心因为缩放而产生锯齿或模糊；
- 可以设置为任意颜色；
- 路径图形会自适应调整为合适的大小。
当然，其同时也有一些缺点：
- 转码难；
- 应用到legend中时会自动填充为实心图标；
- 多种颜色需提供与颜色数等量的图片。
而普通的base64虽然可以支持更复杂的图形，并能够在legend中正常显示，却无法指定颜色和样式。
而对于"绘制复杂的图形，可以定制颜色和样式，legend也可以使用"这样的需求，似乎鱼与熊掌不可兼得？实际上，经过进一步的研究，这里的base64比前面提出的认知的有更丰富的可拓展性。
此处实际上可以使用的是CSS内联的SVG代码并转义的方式来达成目的。(参考： 学习了，CSS中内联SVG图片有比Base64更好的形式 (opens new window) )
在准备好图标的svg文件后，将该文件上传至 在线转译地址 (opens new window)。如图所示，红框内就是绘制需要的base64代码——复制它。并且，为了能在ECharts中使用，在文本前面添加上image://，即可得到ECharts可用文本(见：使用示例-iconUrl)：
由于其主体部分保留了SVG代码，也就相对地保留了该icon的可编辑性。比如，我们想要动态地控制图标颜色：
找到文本中颜色定义部分修改色值(如果没有就添加)
fill='%230FF'。其中，%23是Hex颜色串头#的转义。
使用这种dataURI的另一个好处是，它可以在tooltip中被<span/>或<img/>使用。也就是说，可以实现“视图上、tooltip上和legend上的icon要能保持统一”这一需求。