组件开发规范 - 《ThingJS UI-图表文档》

强规约
弱规约
组件配置规范
- 强规约
- 弱规约
蓝图节点配置规范

强规约

创建组件时选择组件分类，按照echarts组件选择统计图，其他组件选择信息图进行创建
组件的二级分类要选择准确的描述，如果没有准确的分类，选择其他，并在关键字中进行进行分类关键字描述
默认生成的模板中类的命名、父类，成员变量、render函数命名和参数不能修改；成员变量对应的值可以修改
除setData()和setOption()可根据需要进行方法重写外，自定义成员变量和方法不能与组件自有成员变量和方法重名，以下是组件实例自有的成员变量和方法： | 成员变量 | 成员方法 | | —- | —- | | data | destroy() | | dom | resize() | | instance | setData() | | opts | setOption() | | parentDom | __initComp() | | type | _getDom() | | useResizeScale | _registerImg() | | _config | _update() | | _events | render() | | _isLoadingComp | changeOptsToConfig() | | css | changeConfigToOpts() | | _options | |

弱规约

组件按照项目或者类别在项目列表中进行分组
组件按照业务模块名称或者组件业务进行命名
填写组件的描述信息
信息图的大小不应写固定值，则可根据容器大小自适应

组件配置规范

强规约

配置控件数据格式必须按照控件说明文档中的格式书写
控件属性中的key必须是和opts对应的有效的key值
config.js中的配置必须是以下格式

{
  baseNode: {}, // 蓝图节点配置
  configPanel: [] // 属性面板配置
}

弱规约

常规统计图分为四个模块：图表、坐标轴、系列、其他
图表：包含边距、线条样式、面积样式、数据点样式、值标签样式、图例等设置
坐标轴：坐标轴相关设置
系列：系列设置
其他：辅助线、交互增强、提示框、动画
select控件须提供有效的options数据
涉及到取值范围的控件，须提供有效的取值范围

蓝图节点配置规范

强规范

弱规范

组件创建时默认提供的基础节点功能不要修改
节点应具备最基础的显示和隐藏的功能

蓝图节点示例

发送数据的组件代码

/**
* 该组件必须返回一个构造函数对象（此处代码无效）
*/
return class item extends Base {
  constructor(dom, config) {
    super(dom, config);
    // 组件的配置参数
    this.opts = null;
    // 组件初始化的数据
    this.data = "";
    this.useResizeScale = true;
  }
  /**
  * 渲染组件
  * @param {*} data 组件数据
  * @param {*} opts 组件配置参数
  * return 返回html字符串
  */
  render(h, data, opts) {
    return <div></div>;
  }
  onExecute(data, inputs, outputs, basenode) {
    let curExecName = basenode.curExecName;

    if (curExecName === "显示") {
        this.show();
    } else if (curExecName === "隐藏") {
        this.hide();
    } else if (curExecName === "执行") {
      outputs["data"] = "要传递的文字";
      basenode.run("执行", outputs);
    }
  }
  onStop() {
    console.error()
  }
};

发送数据的组件对应的配置

{
  baseNode: {
    name: "接数组件",
    group: "Ui",
    inputs: [
      { name: "执行", type: "exec" },
      { name: "显示", type: "exec" },
      { name: "隐藏", type: "exec" },
    ],
    outputs: [
      { name: "执行", type: "callback" }, // 注意：这个执行跟上面的执行不是同一个类型
      { name: "数据", type: "data" }
    ],
  },
  configPanel: []
}

接收数据的组件代码

/**
* 该组件必须返回一个构造函数对象（此处代码无效）
*/
return class item extends Base {
  constructor(dom, config) {
    super(dom, config);
    // 组件的配置参数
    this.opts = null;
    // 组件初始化的数据
    this.data = "";
    this.useResizeScale = true;
  }
  /**
  * 渲染组件
  * @param {*} data 组件数据
  * @param {*} opts 组件配置参数
  * return 返回html字符串
  */
  render(h, data, opts) {
    return <div></div>;
  }
  onExecute(data, inputs, outputs, basenode) {
    let curExecName = basenode.curExecName;

        console.log("这是接收到的数据：", inputs.data); // 打印接收到的数据

    if (curExecName === "显示") {
        this.show();
    } else if (curExecName === "隐藏") {
        this.hide();
    } else if (curExecName === "执行") {

    }
  }
  onStop() {
    console.error()
  }
};

接收数据的组件对应的配置

{
  baseNode: {
    name: "comp.name",
    group: "Ui",
    inputs: [
      {
        name: "执行",
        type: "exec",
      },
      {
        name: "显示",
        type: "exec",
      },
      {
        name: "隐藏",
        type: "exec",
      },
      {
        name: "数据接收",
        type: "data",
      },
    ],
    outputs: [
      {
        name: "数据",
        type: "data",
      },
    ],
  }
  configPanel: {}
}