echarts-bridge

echarts imperative programming bridge in MV* frontend framework.

Break Changes

调整入口配置，默认为commonjs风格。

目标

前端MV*框架，共同点都是不提倡直接进行底层DOM操作，只能通过框架提供接口(如angularjs指令)，访问原始元素，但是对待图表这种重DOM操作，使用数据同步的方式 进行，效率个人持保留意见。

echarts-bridge目标是作为MV*框架与echarts之间的中间层，存在连接，未连接状态：

• 连接状态，实例本身可以看做echarts instance，可以直接参照官方文档操作
• 未连接状态，实例可以调用echarts instance setter方法，但不会立即执行，而是实例内部缓冲，待与实际DOM连接后进行操作

API

import { Bridge } from '@bornkiller/echarts-bridge';

/**
  * @description - echarts bridge instance
  *
  * @param {string} theme - echarts theme
  * @param {object} initOptions - echarts init options
  * @param {object} mediaOptions - echarts media options
  */
let instance = Reflect.construct(Bridge, [theme, initOptions, mediaOptions]);
let elem = docment.querySelector('.echarts-box');

instance.setOption({}).on('click', () => {}).connect(elem);

实例使用monkey patch方式，缓冲开发操作。以下方法，除特别指明，皆可进行链式操作。

• Bridge#connect: 数据对象与DOM元素连接
• Bridge#disconnect: 断开连接，销毁已生成实例(不支持链式调用，实例已销毁)。
• Bridge#resize: 目前缓冲DOM尺寸设定存在问题，连接后一切正常。 http://echarts.baidu.com/api.html#echartsInstance.resize
• Bridge#setOption: http://echarts.baidu.com/api.html#echartsInstance.setOption
• Bridge#on: http://echarts.baidu.com/api.html#echartsInstance.on
• Bridge#off: http://echarts.baidu.com/api.html#echartsInstance.off
• Bridge#showLoading: http://echarts.baidu.com/api.html#echartsInstance.showLoading
• Bridge#hideLoading: http://echarts.baidu.com/api.html#echartsInstance.hideLoading

关联项目

目前关联项目为基于angularjs的封装: echarts-ng

contact

[email protected]