echarts 中使用自定义图标无法显示
echarts 中使用自定义图标无法显示
背景与问题所在
近期需要做类似下图的效果，在网上找到的 echarts demo 能够显示自定义图标（显然这不是 echarts 官方的图标），一样的代码拷贝过来可以正常预览，但把图标换成自己要展示的就无法在图上显示...
一样的写法，配出来是个方块...？？？
为啥 demo 上的图片咋就可以呢！就？很神奇！
排查了很久没发现问题，直到第二天又仔细对比了几遍之后才发现问题所在：
- 少了个前缀（
image://），而网上找的案例博客里也没强调要注意这个地方...（它只是默默地写上了这个前缀...也许默许了这个注意点看过文档的人都知道吧） - 这个要真没注意到，可能还真就找不到问题所在，要被坑挺一会儿的，毕竟我默认把它当成了一个字符串，把图片地址扔进去就完事儿了，谁曾想还有个前缀要加
探索过程及解决方案
既然知道问题是没加前缀，那我就把前缀加上呗（这时候只是确定了差异点，还没确定是不是这个原因，所以要排查下）
首先，demo 用的图片是 base64 格式的，而我的是一张在线图片，为了排除干扰因素，我随便找了个在线工具将图片转换成了 base64 格式，复制 base64 数据到代码里，然后在前面加上 image://，然后运行，图片正常显示了！nice！
看来就是漏了这个前缀，导致我指定的图片变成了方框...
// 1.图片转成 base64 格式后
/*
image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABr0lEQVRIS7XVPWsVQRQG4PecuWJrEdjZaHUzN7FKE1IERBCCpBEhWASDAQnkH9jEImnijwgWohIbe6tIPsBCFGzMh7s3lR+z5h9Idl7ZfEAw2Ruz9+7Uh/eZM7N7RlDzkprz0XMgseZBy+dvTzZeCqSxmRNynMAYgBsA9gBuC3VlIMtX/u38W4Smij4BeNN53jkDtK0uBEBE5CeIOYAjHY5vH+BXQrYA7IMcE5G7R/VcOxdIIn0tgunu76QEaFuMEvqxNqAITq35ALA48y5WSQeHQGSmIHzTRXr5HZyEplY9gKg60qGDIjSJdF4ES7UBO33obzT0R21AEdyO9TmJ2WrIBUdUhO7GuGWom9UAvHI+zFw8Kqy8B+T4l5fPECwzz1f/ENlVwbAYHSbhIOgHGROyJ5B15/OXpzdWOouS2DwSsihOnQ+tit2UT9NPwJVrVlOAX5zn/Z4Dh5+s1QUBFsEQuQy/qyAd34P2dQwy110ST1tZeNZz4Gg+6QsCt1s+NOsB4sYEGN7l1PGh7GD1ssh/PZmpNRsQfne/wsNagCQy90Q46Xx4XAtw2dDT9X8BN8qrGZD72PUAAAAASUVORK5CYII=
*/
// 2.加上前缀 image:// =>
let redFlag = `image://image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABr0lEQVRIS7XVPWsVQRQG4PecuWJrEdjZaHUzN7FKE1IERBCCpBEhWASDAQnkH9jEImnijwgWohIbe6tIPsBCFGzMh7s3lR+z5h9Idl7ZfEAw2Ruz9+7Uh/eZM7N7RlDzkprz0XMgseZBy+dvTzZeCqSxmRNynMAYgBsA9gBuC3VlIMtX/u38W4Smij4BeNN53jkDtK0uBEBE5CeIOYAjHY5vH+BXQrYA7IMcE5G7R/VcOxdIIn0tgunu76QEaFuMEvqxNqAITq35ALA48y5WSQeHQGSmIHzTRXr5HZyEplY9gKg60qGDIjSJdF4ES7UBO33obzT0R21AEdyO9TmJ2WrIBUdUhO7GuGWom9UAvHI+zFw8Kqy8B+T4l5fPECwzz1f/ENlVwbAYHSbhIOgHGROyJ5B15/OXpzdWOouS2DwSsihOnQ+tit2UT9NPwJVrVlOAX5zn/Z4Dh5+s1QUBFsEQuQy/qyAd34P2dQwy110ST1tZeNZz4Gg+6QsCt1s+NOsB4sYEGN7l1PGh7GD1ssh/PZmpNRsQfne/wsNagCQy90Q46Xx4XAtw2dDT9X8BN8qrGZD72PUAAAAASUVORK5CYII=`
// 3.直接在 echarts 中使用即可
legend: {
data: [
{
name: "推进较快",
icon: redFlag, // 图例中使用
},
...
series: [
{
name: "已完成",
type: "scatter",
coordinateSystem: "geo",
data: wancheng,
symbol: redFlag, // 使用
...
base64 格式的图片加了前缀可以正常显示，那其他格式的图片加上这个前缀是不是也就可以显示出来了呢？
//供水管道: 图标（错误写法，未加前缀）
var iconGD = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhklEQVRYR+2WT1KDMBTG3wt2ph3paBfitu5aNvYG6lE8gR7B3kBv4E3EG9ANdclWXJQZGHWmlecEJrUihIamxUWzySa875cv7w8IDS9sWB8wCoYOApACyMS0prcK56VHMQ5sFXEgoOeuNb3UBhC9DZSCIbHQtDxXG4AIFAfDewA4lwTWar3QWSZhlgt4UQag2/o9gBYHolf7jjGgwxNvXDcpN8oBUcKm5dVuaGsDAIBrYPKrAX0Rc/jNDUwqS7l98DnBnh/mnVIBqOvyynfkGC267vRefOUc0KCehiCA0Gy9nwk3duyAuAY9iHnSCMBqU/s/ANkswBtdby2LU+gAzfrH8bzjI+DRtiEKAbjox2zQX8zxUTaUdMCVAixzlLuxaI+qxJDYU1pamFytnkVi0tFeCVAl/PMPkf1N5Vuxymiv3cO5MB9GfO+eeuku1s4AypzaAzTuAG9qBFBaRQjg/pkF62a+7Fwc2CMDE6VGtlEV5GGqrC+C1wpQZf3WAeo8o1YH6gB8Axqb1zdNIMxTAAAAAElFTkSuQmCC"
//城市绿地: 图标（正确写法，能正常显示）
var iconLD = "image://https://www.coveycity.com/upload/xichengBigScreen/greenFlag.png"
//天燃气: 图标（正确写法，能正常显示）
var iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABr0lEQVRIS7XVPWsVQRQG4PecuWJrEdjZaHUzN7FKE1IERBCCpBEhWASDAQnkH9jEImnijwgWohIbe6tIPsBCFGzMh7s3lR+z5h9Idl7ZfEAw2Ruz9+7Uh/eZM7N7RlDzkprz0XMgseZBy+dvTzZeCqSxmRNynMAYgBsA9gBuC3VlIMtX/u38W4Smij4BeNN53jkDtK0uBEBE5CeIOYAjHY5vH+BXQrYA7IMcE5G7R/VcOxdIIn0tgunu76QEaFuMEvqxNqAITq35ALA48y5WSQeHQGSmIHzTRXr5HZyEplY9gKg60qGDIjSJdF4ES7UBO33obzT0R21AEdyO9TmJ2WrIBUdUhO7GuGWom9UAvHI+zFw8Kqy8B+T4l5fPECwzz1f/ENlVwbAYHSbhIOgHGROyJ5B15/OXpzdWOouS2DwSsihOnQ+tit2UT9NPwJVrVlOAX5zn/Z4Dh5+s1QUBFsEQuQy/qyAd34P2dQwy110ST1tZeNZz4Gg+6QsCt1s+NOsB4sYEGN7l1PGh7GD1ssh/PZmpNRsQfne/wsNagCQy90Q46Xx4XAtw2dDT9X8BN8qrGZD72PUAAAAASUVORK5CYII="
- 试了下，还真的是这样，其他格式也可以，记得加上前缀
- 问题是解决了，但我总觉得这样的推理不靠谱，想着去官网文档翻翻看，看看有没有写什么
官网文档截图
哟呵，文档里还真有讲...
- 推测在 echarts 里用到网络图片的地方都这样吧？下次再遇到 echart 中自己指定的图片显示不出来，可以加上
image://前缀再试试
