迷你面积图

阅读时间约 1 分钟

图表容器

width

optional number default: 400

设置图表宽度。

height

optional number default: 400

设置图表高度。

autoFit

optional boolean default: true

图表是否自适应容器宽高。当 autoFit 设置为 true 时,widthheight 的设置将失效。

padding

optional number[] | number | 'auto'

画布的 padding 值,代表图表在上右下左的间距,可以为单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向,或者开启 auto,由底层自动计算间距。

appendPadding

optional number[] | number

额外增加的 appendPadding 值,在 padding 的基础上,设置额外的 padding 数值,可以是单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向。

renderer

optional string default: canvas

设置图表渲染方式为 canvassvg

pixelRatio

optional number default: window.devicePixelRatio

设置图表渲染的像素比,和底层的 devicePixelRatio 含义一致,一般不用设置,除非在页面有整体 scale 的情况下,可以自定义。

limitInPlot

optional boolean

是否对超出坐标系范围的 Geometry 进行剪切。

数据映射

data

required number[]

设置图表数据源。mini 面积图的数据直接采用一个数字数组,代表一个指标的变化趋势,无需设置 x 轴字段。

meta

optional object

全局化配置图表数据元信息,以字段为单位进行配置,来定义数据的类型和展示方式。在 meta 上的配置将同时影响所有组件的文本信息。

细分配置项名称类型功能描述
aliasstring字段的别名
formatterfunctioncallback 方法,对该字段所有值进行格式化处理
valuesstring[]枚举该字段下所有值
rangenumber[]字段的数据映射区间,默认为[0,1]

关于 meta 的更多配置项,请查看 Meta Options

图形样式

smooth

optional boolean default: false

是否平滑。

areaStyle

optional StyleAttr | Function

面积图形样式。

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

line

optional object

面积中折线的样式。

细分配置项名称类型功能描述
colorstring | string[] | Function颜色映射
styleShapeStyle | Function样式映射
sizenumber | [number, number] | Function折线宽度

point

optional pointStyle

面积图数据点图形样式。

细分配置类型功能描述
colorstring | string[] | Function数据点颜色,也可以支持回调的方式设置,回调参数为 color: (x, y, series) => string
shapestring | Function数据点形状,也可以支持回调的方式设置,回调参数为 shape: (x, y, series) => string
sizenumber | Function数据点大小,也可以支持回调的方式设置,回调参数为 size: (x, y, series) => number
styleobject | Function数据点样式,也可以支持回调的方式设置,回调参数为 style: (x, y, series) => object
stateobject数据点状态样式,设置对应状态的样式。详细参考 state`

color

optional string | string[] | Function

指定点的颜色。如没有配置 colorField,指定一个单值即可。对 colorFiled 进行了配置的情况下,即可以指定一系列色值,也可以通过回调函数的方法根据对应数值进行设置。

默认配置:采用 theme 中的色板。

// 设置单一颜色
{
  color: '#a8ddb5'
}
// 设置多色
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

图表组件

tooltip

fields
可选 string[]

指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。

tooltip: {
  fields: ['x', 'y'],
}
formatter
可选 Function

格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)

tooltip: {
  formatter: (datum: Datum) => {
    return { name: datum.x, value: datum.y + '%' };
  },
}
follow
可选 boolean default: true

设置 tooltip 内容框是否跟随鼠标移动。

enterable
可选 boolean default: false

tooltip 是否允许鼠标滑入。

showTitle
可选 boolean default: false

是否展示 tooltip 标题。

title
可选 string

设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。

position
可选 top | bottom | left | right

设置 tooltip 的固定展示位置,相对于数据点。

shared
可选 boolean

true 表示合并当前点对应的所有数据并展示,false 表示只展示离当前点最逼近的数据内容。

showCrosshairs
可选 boolean default: false

是否展示 crosshairs。

crosshairs
可选 object

配置 tooltip 的 crosshairs,当且仅当 showCrosshairs 为 true 时生效。

细分配置项名称类型功能描述
typex | y | xycrosshairs 的类型: x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助项
linelineStyle线的配置项,详细可见 ShapeAttrs
texttextStyle辅助线文本配置,支持回调
textBackgroundtextBackgroundStyle辅助线文本背景配置
followboolean辅助线是否跟随鼠标移动,默认为 false,即定位到数据点

textStyle

属性名类型介绍
fontSizenumber文字大小
fontFamilystring文字字体
fontWeightnumber字体粗细
lineHeightnumber文字的行高
textAlignstring设置文本内容的当前对齐方式, 支持的属性:center | end | left | right | start,默认值为start
fillstring文字的填充色
fillOpacitynumber文字的填充透明度
strokestring文字的描边
lineWidthnumber文字描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber文字的整体透明度
shadowColorstring文字阴影颜色
shadowBlurnumber文字阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距文字的水平距离
shadowOffsetYnumber设置阴影距文字的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码,以 label.style 配置为例:

{
  label: {
    style:{
      fontSize: 80,
      fontWeight: 300,
      textAlign: 'center',
      textBaseline: 'middle',
      shadowColor: 'white',
      shadowBlur: 10,
    }
  }
}

textBackgroundStyle

细分配置项名称类型功能描述
paddingnumber | number[]文本背景周围的留白
styleshapeStyle线的配置项, 详细可见 ShapeAttrs
showMarkers
可选 boolean default: true

是否渲染 tooltipMarkers。

marker
可选 ShapeAttrs

tooltipMarker 的样式配置。

样式配置类型,详细可见: ShapeAttrs

showContent
可选 boolean default: false

是否展示 tooltip 内容框。

container
可选 string|HTMLElement

自定义 tooltip 的容器。

containerTpl
可选 string

用于指定图例容器的模板,自定义模板时必须包含各个 dom 节点的 class。

itemTpl
可选 string

每项记录的默认模板,自定义模板时必须包含各个 dom 节点的 class。

domStyles
可选 TooltipDomStyles

传入各个 dom 的样式。

dom-styles
/** Tooltip 内容框的 css 样式定义 */
{
  domStyles: {
    'g2-tooltip'?: CSSProperties;
    'g2-tooltip-title'?: CSSProperties;
    'g2-tooltip-list'?: CSSProperties;
    'g2-tooltip-list-item'?: CSSProperties;
    'g2-tooltip-marker'?: CSSProperties;
    'g2-tooltip-value'?: CSSProperties;
    'g2-tooltip-name'?: CSSProperties;
  }
}
offset
可选 number

tooltip 偏移量。

reversed
optional boolean

是否将 tooltip items 逆序.

showNil
optional boolean

是否显示空值的 tooltip 项

customItems
可选 Function

在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等)。

{
  tooltip: {
    customItems: (originalItems: TooltipItem[]) => {
      // process originalItems, 
      return originalItems;
    };
  }
}
customContent
可选 Function

支持自定义模板。

{
  tooltip: {
    customContent: (title, data) => {
      return `<div>${title}</div>`;
    };
  }
}

尝试一下:

axis

xAxis、yAxis 配置相同。

top
optional boolean default: false

是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡。

position
optional top | bottom | left | right

适用于直角坐标系,设置坐标轴的位置。

title
optional object

标题的配置项,null 表示不展示。

细分配置项名称类型功能描述
textstring坐标轴标题
positionstring轴标题的位置,默认:'center'。可选项: start, center, end
offsetnumber标题距离坐标轴的距离
spacingnumber标题距离坐标轴文本的距离
styleshapeStyle标题文本配置项
autoRotateboolean是否自动旋转

shapeStyle

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

label

optional object

文本标签的配置项,null 表示不展示。

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 inner|outer|spider
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

LabelLineCfg 类型定义如下:(关于 ShapeAttrs 详细查看 ShapeAttrs 文档)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    },
    rotate: true
  }
}
label
optional AxisLabelCfg | null

文本标签的配置项,null 表示不展示。AxisLabelCfg 配置如下:

参数名类型默认值描述
offsetnumber-label 的偏移量
rotatenumber-文本旋转角度
autoRotateboolean |avoidCallbacktrue是否自动旋转
autoHideboolean |avoidCallback | { type:string,cfg?:AxisLabelAutoHideCfg }false是否自动隐藏
autoEllipsisboolean |avoidCallback |stringfalse是否自动省略
formatter(text: string, item: ListItem, index: number) => anyfalse格式化函数
styleShapeAttrs-坐标轴刻度线的样式配置项

avoidCallback 类型定义如下:

type avoidCallback = (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean;

AxisLabelAutoHideCfg 类型定义如下:

interface AxisLabelAutoHideCfg {
  /** 最小间距配置 */
  minGap?: number;
}
verticalFactor
optional number

标记坐标轴 label 的方向,左侧为 1,右侧为 -1(仅适用于垂直方向的坐标轴)

verticalLimitLength
optional number

配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。

grid
optional object

坐标轴网格线的配置项,null 表示不展示。

细分配置项名称类型功能描述
linelineStyle线的样式,
alternateColorstring|string[]两个栅格线间的填充色
closedboolean对于 circle 是否关闭 grid
alignTickboolean是否同刻度线对齐,如果值为 false,则会显示在两个刻度中间

网格线条样式的配置与 line 是一致的。

line
optional object

坐标轴线的配置项,null 表示不展示。

注意: 线条样式的完整配置是 { style: { stroke: '#ddd', ... } }, 如果配置线条样式不生效的时候,请检查一下。

属性名类型介绍
strokestring线的颜色
lineWidthnumber线宽
lineDash[number,number]虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
opacitynumber透明度
shadowColorstring阴影颜色
shadowBlurnumber高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例(设置 x 轴的 grid 网格线条样式):

{
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: 'black',
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: 'pointer'
        }
      }
    }
  }
}
tickLine
optional object

坐标轴刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴刻度线的样式。
alignTickboolean坐标轴刻度线是否同 tick 对齐
lengthnumber坐标轴刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
subTickLine
optional object

坐标轴子刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴子刻度线的样式。
countnumber子刻度个数
lengthnumber坐标轴子刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
nice
optional boolean default: true

是否美化。

min
optional number default: 0

坐标轴最小值。

max
optional number

坐标轴最大值。

minLimit
optional number

最小值限定。

maxLimit
optional number

最大值限定。

tickCount
optional number

期望的坐标轴刻度数量,非最终结果。

tickInterval
optional number

坐标轴刻度间隔。

tickMethod
optional string | Function default: false

指定 tick 计算方法,或自定义计算 tick 的方法,内置 tick 计算方法包括 cattime-catwilkinson-extendedr-prettytimetime-prettylogpowquantiled3-linear

animate
optional boolean default: true

动画开关,默认开启。

animateOption
optional object

动画参数配置。

interface ComponentAnimateCfg {
  /** 动画执行时间 */
  readonly duration?: number;
  /** 动画缓动函数 */
  readonly easing?: string;
  /** 动画延迟时间 */
  readonly delay?: number;
}
// 配置参考
{
  animateOption: {
    appear: ComponentAnimateCfg;
    update: ComponentAnimateCfg;
    enter: ComponentAnimateCfg;
    leave: ComponentAnimateCfg;
  }
}

annotations

type
required string

标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html.

position
required object

标注位置。

  • 第一种,object 使用图表 x, y 对应的原始数据例如:{ time: '2010-01-01', value: 200 };
  • 第二种,数组来配置位置 [ x, y ],根据数组中的值的存在以下几种形式: 1、对应数据源中的原始数据; 2、关键字:'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束; 3、x, y 都是百分比的形式,如 30%,在绘图区域定位(即坐标系内)。 1 和 2 两种类型的数据可以混用,但是使用百分比形式时 x 和 y 必须都是百分比形式。
  • 第三种,回调函数,可以动态得确定辅助元素的位置,应用于数据动态更新,辅助元素的位置根据数据变化的场景。
top
optional boolean default: false

是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层。

animate
optional boolean

是否进行动画。

offsetX
optional number

x 方向的偏移量。

offsetY
optional number

y 方向的偏移量。

start
optional Array

起始位置,一般用于 line、region 等。

end
optional Array

结束位置,一般用于 line、region 等。

{
  type: 'line',
  start: ['min', 'median'],
  end: ['max', 'median'],
},
style
optional object

图形样式属性,参考绘图属性。

src
optional string

图片路径,用于 image 中。

content
optional string

文本内容,用于 text 中。

rotate
optional number

文本的旋转角度,弧度制。

maxLength
optional number

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

文本在二维坐标系的显示位置,是沿着 x 轴显示 还是沿着 y 轴显示。

background
optional object

文字包围盒样式设置。

参数名类型默认值描述
styleobject-文本背景的样式, 参考绘图属性
paddingnumber | number[]-文本背景周围的留白
color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

设定 regionFilter 只对特定 geometry 类型起作用,如 apply: ['area'],一般用于 regionFilter。

autoAdjust
optional boolean

文本超出绘制区域时,是否自动调节文本方向。

direction
optional upward | downward

朝向。

lineLength
optional number

line 长度,用于 dataRegion。

render
optional string

自定义标记的绘制 render 函数,其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数,其他 parserPosition 可以用来计算数据点对应的坐标位置,用于 shape。

container
optional string | HTMLElement

自定义 HTML 图形标记的容器元素,用于 html

html
optional string | HTMLElement

自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数,用于 html

alignX
optional 'left' | 'middle' | 'right'

DOM 元素在 X 方向的对齐方式,用于 html

alignY
optional left' | 'middle' | 'right'

DOM 元素在 Y 方向的对齐方式,用于 html

图表主题

推荐使用 💄 ThemeSet 在线自定义自己的主题配置。

内置主题

目前默认的内置主要有两套:defaultdark

{
  theme: 'default', // 'dark',
}

主题属性

除了使用内置的 defaultdark 主题之外,还可以通过设置主题属性来修改部分主题内容:

下表列出了组成主题的大配置项上的具体属性:

主题属性类型描述
defaultColorstring主题色
paddingnumbernumber[]
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber玫瑰图占比,0 - 1 范围数值
multiplePieWidthRationumber多层饼图/环图占比,0 - 1 范围数值
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

使用方式:

{
  theme: {
    colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA']
  }
}

主题属性(主题样式表)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

使用方式:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir'
    }
  }
}

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
fontFamilystring字体

更新主题

使用方式:

// 示例1:
plot.update({ theme: 'dark' });

// 示例2:
plot.update({ theme: { defaultColor: '#FF6B3B' } })

自定义注册主题

另外,还可以通过 G2 提供了自定义主题机制来定义全新的主题结构,以允许用户切换、定义图表主题。前往 G2 | 自定义主题 查看详情。

🌰 自定义主题 DEMO 示例

图表事件

在 Plot 上通过 on 绑定事件、off 移除绑定事件。

// 绑定事件
plot.on('eventName', callback);
// 绑定事件,只触发一次
plot.once('eventName', callback);
// 移除事件
plot.off('eventName', callback);

组合方式: ${componentName}:${eventName}

// plot 添加点击事件,整个图表区域
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// element 添加点击事件, element 代表图形元素,关于图形元素,请查看:https://g2.antv.vision/zh/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// 图例添加点击事件
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// 图例名称添加点击事件
plot.on('legend-item-name:click', (...args) => {
  console.log(...args);
});

// 给 tooltip 添加点击事件
plot.on('tooltip:show', (...args) => {
  console.log(...args);
});

plot.on('tooltip:hide', (...args) => {
  console.log(...args);
});

plot.on('tooltip:change', (...args) => {
  console.log(...args);
});

// label 添加点击事件
plot.on('label:click', (...args) => {
  console.log(...args);
});

// mask 添加点击事件
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// axis-label 添加点击事件
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// 给 annotation 添加点击事件
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

图表方法

render()

渲染图表。

update()

更新图表配置项,配置覆盖,不会做差异比对。

使用示例:

plot.update({
  ...currentConfig,
  legend: false,
});