自定义 mark

图表的自定义 mark 功能，可以让用户在图表上添加自定义的标记，比如添加一些文本、图片、线段等。

配置接口

自定义 mark 的配置，在 spec 的最上层，通过 mark 字段进行配置。

const spec = {
  customMark: {
    type: T; // 支持的类型请见下方详细介绍
    /** 关联的数据索引 */
    dataIndex?: number;
    /** 关联的数据id，有次配置时 dataIndex无效 */
    dataId?: StringOrNumber;
    /** 图表系列 mark 支持的配置 */
    /** 用户id */
    id?: StringOrNumber;
    /** 是否响应交互 */
    interactive?: boolean;
    /** 与其他mark元素的层级 */
    zIndex?: number;
    /** mark 层 是否显示配置 */
    visible?: boolean;
    /** 默认样式设置 */
    style?: ConvertToMarkStyleSpec<T>;
    /** 不同状态下的样式配置 */
    state?: Record<StateValue, IMarkStateSpec<T> | IMarkStateStyleSpec<T>>;
  };
}

除了需要配置 mark 的类型，以及可选的数据外，其他的配置项与系列的 mark 没有区别。

目前支持的 mark 类型如下

• symbol 点图形
• rule 一个线段，需要指定起点和终点
• text 文本
• rect 矩形
• path 路径
• arc 扇区
• polygon 多边形
• group 组，可以将其他 mark 放到组下

使用示例

在一些场景中，我们会期望展示一下额外的信息，下面的例子使用了自定义 mark，展示数据中的年份