二次开发

interface IStage {
  get: (id: string) => ICompatibleComponent | undefined;
  getAll: () => Record<string, ICompatibleComponent | undefined>;
  on: (eventName: string, listener: (...args: any[]) => void) => () => void;
  emit: (eventName: string, ...args: any[]) => void;
  exec: (methodName: string, ...args: any[]) => void;
  expose: (methodMap: Record<string, (...args: any[]) => void>) => void;
  getComponent: (id: string) => IDatavComponent | undefined | null;
  getVariable: (
    id: string,
  ) =>
    | {
        value: any;
        set: (value: any) => void;
        onChange: (cb: (current: any, prev: any) => void) => IDisposer;
      }
    | undefined;
}

type IDisposer = () => void;
/**
 * 组件实例通用方法
 */
interface IDatavComponent {
  /** 组件绘制 */
  render(data: any, options?: { [key: string]: any }): void;
  /** 配置更新 */
  updateOptions(options: { [key: string]: any }): void;
  /** 组件卸载 */
  destroy(): void;
  /** 宽高尺寸变更 */
  resize?(w: number, h: number): void;
  /** 开始动画 */
  startAnimates?(): void;
  /** 清除动画 */
  clearAnimates?(): void;
}

interface IMoveConfig {
  attr: {
    x: number;
    y: number;
  };
  positionType: 'to' | 'by';
}

type ICompatibleComponent = IDatavComponent & {
  /* 组件实例 */
  instance: any;
  /* 组件实际绘制的 dom */
  container: HTMLDivElement;
  /* 监听组件抛出的事件, 具体回调函数入参请参考组件的文档 */
  on: (eventName: string, ...args: any[]) => void;
  /* 显示组件 */
  show(): void;
  /* 隐藏组件 */
  hide(): void;
  /* 更新组件样式配置 */
  updateProps(props: any): void;
  /* 设置组件数据 */
  setData(key: string): void;
  /* 发起组件数据获取流程，可指定数据名 */
  fetchData(key?: string): Promise<any>;
  /* 监听组件数据变化 */
  onDataChange: (key: string, cb: (current: any, prev: any) => void) => IDisposer;
} & {
  /* 组件 id */
  __id: string;
  /* 切换组件显隐 */
  toggleVisible(): void;
  /* 移动组件 */
  move(options: IMoveConfig): void;
}

您可通过如下代码获取组件。

const lineChart: ICompatibleComponent = stage.get('@echarts_echarts-line-category_eqbr7');

您可通过如下代码切换组件显隐。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 隐藏组件
lineChart.hide();
// 显示组件
lineChart.show();
// 切换显隐
lineChart.toggleVisible();

您可通过如下代码移动组件。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 向右移动 100 个单位，向下移动 30 个单位
lineChart.move({
  attr: {
    x: 100,
    y: 30,
  },
  positionType: 'by'
});

// 移动到坐标为 (0, 120) 的位置（ 注意，坐标系原点为画布左上角 ）
lineChart.move({
  attr: {
    x: 0,
    y: 120,
  },
  positionType: 'to'
});

您可通过如下代码设置组件数据。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 置空组件的数据
lineChart.setData('source', []);

您可通过如下代码查看组件数据。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 组件当前数据
const data = lineChart.data;

您可通过如下代码获取组件的 DOM。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 禁止对 dom 做直接的删改操作，可能影响运行时内容
const dom = lineChart.container;

您可通过如下代码发起组件数据源请求。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 发起组件所有数据源请求
lineChart.fetchData();
// 发起组件 source 数据源的请求
lineChart.fetchData('source')

您可通过如下代码监听组件的数据变更。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

lineChart.onDataChange('source', (currentData, previousData) => {
  // 当组件 source 数据源结果发生变化时，进入该回调函数
});

您可通过如下代码监听组件抛出的事件。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');

// 具体事件 id 及回调函数入参请参照蓝图编辑器中的说明，或者组件文档
lineChart.on('click', () => {
  
});

您可通过如下代码监听组件更新组件样式配置。

const lineChart = stage.get('@echarts_echarts-line-category_eqbr7');
lineChart.updateProps({
  // 具体可配置的样式请查看组件文档
});

您可通过如下代码获取全局变量。

const varA = stage.getVariable('var_khje3');
// 查看当前值
const value = varA.value;
// 设置变量值
varA.set('newValue');
// 监听变量变化
varA.onChange((currentValue, oldValue) => {

});

您可通过如下代码监听页面事件。

// 具体可用事件请在蓝图编辑器中的数据看板接口节点上查看
stage.on('data-update', () => {
  
});

您可通过如下代码执行页面方法。

// 具体方法请在蓝图编辑器中的数据看板动作接口节点上查看
stage.exec('change-location', { value: '浙江省' });

您可通过如下代码对外手动抛出页面事件。

// 手动抛出事件
stage.emit('custom-evt', []);

stage.on('custom-evt', (data) => {
  // data 为空数组
});