APIs

本节内容为标准范式图表组件库的 APIs 文档。

实时调试预览

模块 API

init()

• init(dom, theme?, ecTheme?, initOption?): Chart

• 参数

  名称	类型	是否可选	默认值	描述
  dom	string | HTMLElement			图表的 dom 容器
  theme	PresetTheme	是		主题配置
  ecTheme	EChartsTheme	是		（v1.2.0+）ECharts 的主题配置（参考 ECharts 的 init() API theme 参数）
  initOption	EChartsInitOpts	是		ECharts 的初始化配置（参考 ECharts 的 init() API opts 参数）

创建一个图表实例。

const chart = init('#chart');

不同场景的示例：

const chart = init('#chart');

// 使用主题
const chart = init('#chart', 'mobile-app-light');

// 同时使用 ECharts 主题
const chart = init('#chart', 'mobile-app-light', 'dark', {});

// 仅使用 ECharts 主题
const chart = init('#chart', null, 'dark', {});

// 使用 ECharts 初始化配置
const chart = init('#chart', null, { renderer: 'svg' });

// 使用 ECharts 主题和初始化配置
const chart = init('#chart', null, 'dark', { renderer: 'svg' });

registerTheme()

• registerTheme(Theme): void
• 参数类型

v1.7.0

名称	类型	是否可选	默认值	描述
theme	Theme	否		自定义的主题对象

注册并使用自定义主题的场景示例，实际参考Demo。

// 定义配置项预解析函数
function exampleParser(option, chart, optionToken) {
  console.log('这是一个配置项预解析函数');
}

// 定义主题信息
const myTheme = {
  name: 'myTheme',
  parsers: [exampleParser],
  token: {},
};

// 注册主题
registerTheme(myTheme);

实例 API

动画控制

play()

• play(arg)

• 参数

  名称	类型	是否可选	默认值	描述
  arg.option	EChartsOption			渲染配置项（参考 ECharts 官方文档 ）
  arg.opts	SetOptionOpts	是		配置项的更新策略选项（参考 ECharts 的 setOption() 文档的 opts 参数）

开始播放动画。

chart.play({ option, opts });

其它

getDom()

• getDom(): HTMLElement

获取图表实例的 DOM 容器元素。

getECharts()

• getECharts(): ECharts

获取图表实例底层的 echarts 实例。

getModel()

注意

不建议使用。

• getModel(): Model

获取图表实例的 Model 实例。

destroy()

• destroy()

销毁图表实例，释放资源。

on()

提示

支持 ECharts 的原生事件，使用方式参考官方文档。

• on(name, handler): Chart

• 参数

  名称	类型	是否可选	默认值	描述
  name	EventName			事件类型
  handler	event => void			事件回调

绑定事件。

once()

提示

支持 ECharts 的原生事件，使用方式参考官方文档。

• once(name, handler): Chart

• 参数

  名称	类型	是否可选	默认值	描述
  name	EventName			事件类型
  handler	event => void			事件回调

绑定事件（仅触发一次事件回调）。

off()

提示

支持 ECharts 的原生事件，使用方式参考官方文档。

• off(name, handler): Chart

• 参数

  名称	类型	是否可选	默认值	描述
  name	EventName			事件类型
  handler	event => void			事件回调

取消绑定事件。

事件

事件类型。

function afterInitHandler() {
  // TODO
  chart.getECharts();
}

// 绑定事件
chart.on('dv:afterinit', afterInitHandler);
// 取消绑定事件
chart.off('dv:afterinit', afterInitHandler);

生命周期事件

对于事件的触发时机可参考范式图表组件库的程序生命周期。

dv:beforeinit

• 'dv:beforeinit'

初始化前的 Hook。（调用 init() 时初始化逻辑执行前触发，内部实现为调用 echarts.init() 前触发）

dv:afterinit

• 'dv:afterinit'

初始化后的 Hook。（调用 init() 时初始化逻辑执行后触发，内部实现为调用 echarts.init() 后触发）

dv:beforeupdate

• 'dv:beforeupdate'

更新前的 Hook。（每次调用 chart.play() 时触发，内部实现为每次调用 echartsIns.setOption() 前触发）

dv:afterupdate

• 'dv:afterupdate'

更新后的 Hook。（每次调用 chart.play() 时触发，内部实现为每次调用 echartsIns.setOption() 后触发）

dv:beforedestroy

• 'dv:beforedestroy'

销毁实例前的 Hook。（调用 chart.destroy() 时销毁逻辑执行前触发）

dv:afterdestroy

• 'dv:afterdestroy'

销毁实例后的 Hook。（调用 chart.destroy() 时销毁逻辑执行后触发）

dv:play

• 'dv:play'

播放 Hook。（每次调用 chart.play() 时立即触发，早于 dv:beforeupdate 事件触发）

其它事件

dv:click

注意

与 echarts 的 click 事件 仅在点击某些组件元素时触发，而 dv:click 事件在点击画布任意位置时都会触发。

• 'dv:click'

点击画布任意位置触发。

dv:updateAxisPointer

注意

• 与直接使用 echartsIns.on('updateAxisPointer') 的区别是在有 dataZoom.inside 存在时，如果触发 dataZoom 的交互则不会触发该事件
• 调用 echartsIns.dispatchAction({ type: 'updateAxisPointer' }) 时也会触发

• 'dv:updateAxisPointer'

v0.0.12+

可用来监听 axisPointer 的坐标更新。