资源

@antv/infographic 框架本身不提供任何资源服务。如果你的信息图中使用了图标或插图资源，需要自行实现资源加载逻辑。

框架支持两种方式：

1. 内置协议 - 使用 Data URI 直接嵌入资源（无需注册加载器）
2. 自定义加载器 - 注册加载器从你的服务加载资源

资源配置方式

在数据中，icon 和 illus 属性可以配置资源：

{
  "data": {
    "items": [
      {
        "icon": "<ResourceConfig 或 字符串>",
        "illus": "<ResourceConfig 或 字符串>"
      }
    ]
  }
}

字符串形式

字符串会被自动解析为 ResourceConfig 对象：

// 直接使用字符串
icon: 'data:image/svg+xml,<svg>...</svg>';
icon: 'data:text/url,https://example.com/icon.svg';
illus: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';

对象形式

可以直接提供 ResourceConfig 对象：

interface ResourceConfig {
  type: 'image' | 'svg' | 'remote' | 'custom';
  data: string;
  [key: string]: any; // 可以添加自定义属性
}

内置资源协议

框架内置了几种资源协议，无需注册加载器即可使用：

1. SVG 资源

使用 Data URI 格式的 SVG，以 data:image/svg+xml, 开头，后面为 SVG 字符串：

{
  "data": {
    "items": [
      {
        "icon": "data:image/svg+xml,<svg>...</svg>"
      }
    ]
  }
}

2. 远程 URL

通过 Data URI 包装远程 URL，以 data:text/url, 开头，后面为资源的完整 URL：

{
  "data": {
    "items": [
      {
        "icon": "data:text/url,https://example.com/icon.svg"
      }
    ]
  }
}

3. Base64 图片

使用 Base64 编码的图片，以 data:image/<format>;base64, 开头，后面为 Base64 编码字符串：

{
  "data": {
    "items": [
      {
        "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
      }
    ]
  }
}