Index.js规范

Index.js文件是组件的主入口文件，该文件提供了一个示例供您参考，并介绍了index.js文件中常用的组件生命周期或相关函数。

示例组件为一个文本组件：展示度量字段的值，并允许对文本进行样式设置。

• eventParam参数说明。

  表3 eventParam参数说明

  参数	是否必选	参数类型	描述
  key	是	select、drive、link	select：允许组件在交互面板里通过交互编辑的方式定义交互事件，该事件和drive、link类型不支持同时配置。 drive：允许组件在交互面板里配置联动，和select类型不支持同时配置。 link：允许组件在交互面板里配置跳转。
  params	是	Object	事件触发字段和其值，参考params说明。

  eventParam参数中params说明。

  表4 params说明

  参数	是否必选	参数类型	描述
  key	是	String	发起交互的数据字段id，如果是select类型，则值为“value”。
  value	是	String | Number	发起交互的数据字段对应值。
  isReset	否	Boolean	默认为false，用于标识是初次发起交互还是将上次交互取消，例如柱状图发起交互时柱子高亮，取消交互后柱子复原。

• eventEmit使用说明

  该方法为交互事件方法，在触发交互的函数中调用，例如单击文本时。

  触发select类型的交互，需要在gui.json的event中配置type为“select”，调用方法如下：

  // click为触发交互时的方法，为用户自定义方法，为保证this上下文不变，请使用箭头函数
  click = () => {
      // 交互触发
      this.eventEmit({
          key: 'select',
          params: [
              {
                  key: 'value', // 固定为value
                  value: xxx, // 触发交互的值
              },
          ],
      });
  };

  触发drive类型的交互，需要在gui.json的event中配置type为“drive”，参数如下：

  click = () => {
      // 交互触发
      this.eventEmit({
          key: 'drive',
          params: [
              {
                  key: 'xxxxxxx', // 发起联动字段id
                  value: xxx, // 触发交互的值
              },
          ],
      });
  };

  触发link类型的交互，需要在gui.json的event中配置type为“link”，参数如下：

  click = () => {
      // 交互触发
      this.eventEmit({
          key: 'link,
          params: [
              {
                  key: 'xxxxxxx', // 发起联动字段id
                  value: xxx, // 触发交互的值
              },
          ],
      });
  };

• 自定义组件相关数据获取
  用户可以从自定义组件的开发包中获取最新样式配置值、数据值以及绑定的数据集字段。相关数据统一存放在开发包的config变量中。

  表5 自定义组件相关数据

  参数	参数类型	描述
  styledata	Object	样式配置和gui.json中的配置对应，例如获取gui.json中name为fontSize的样式值：this.config.styledata.fontSize。
  jsondata	Object	发起交互的数据字段对应值，详细信息参考jsondata说明。

  表6 jsondata说明

  参数	参数类型	描述
  dataBind.dataArea	Arrary	数据面板绑定的字段信息，为数组结构，详细信息参考dataArea项说明。
  originData	Arrary	实时获取的数据值，详细信息参考originData说明。

  表7 dataArea项说明

  参数	参数类型	描述
  areaId	Object	gui.json中配置的数据槽位类型，可选值参考AreaId说明。
  columnList	Arrary	使用组件在大屏或仪表板搭建时，在数据面板槽位中拖拽的字段信息，字段信息说明参考columnList说明。

• columnList说明
  该值为数组，数组的每一项对应一个数据集字段信息。

  表8 数据槽位字段信息说明

  参数	参数类型	描述
  id	String	唯一标识的字段id，调用交互函数eventEmitter方法时，需要传入该id。
  caption	String	字段对应名字。
  type	'dimension' | 'measure'	字段类型，dimension为维度，measure为度量。

• originData说明

  存放实时获取的数据值，通过this.config.jsondata.originData获取。

  originData为二维数组，第一行数据为表头，存放字段信息，没有具体值。第二行及后存放数据。

  数据行的每一个数据项对应数据面板中槽位的一个字段，数据项说明见表9。

  表9 originData数据项说明

  参数	参数类型	描述
  id	String	字段id。
  caption	String	字段对应名字。
  cellRawValue	String | Number	该字段的值。
  cellValue	String | Number	该字段按数据集规则格式化后的值。

  index.js文件示例如下：

  import gui from './gui.json';
  import './index.less';
  class App extends CustomBaseChart {
      constructor(props) {
          super(props);
          this.el.innerHTML = this.renderHtml();
      }
      refresh() {
          this.loadData();
      }
      loadData() {
          this.el.innerHTML = this.renderHtml();
          this.el.querySelector(".insight-text-inner").addEventListener('click', this.click, false);
      }
      renderHtml() {
          return `
          <div class="insight-text-inner" style="color: ${this.config.styledata.color
              };font-size: ${this.config.styledata.fontSize}px;font-weight: ${this.config.styledata.fontWeight}">
              <span class="insight-text-content">${this.data[1]?.[0]?.cellRawValue ?? "No Data"}</span>
          </div>
          `
      }
      resize(attr) {
          this.attr = { ...attr };
      }
  click = () => {
      // 交互触发
      this.eventEmit({
          key: 'drive',
          params: [
              {
                  key: this.data[1]?.[0]?.id,
                  value: this.data[1]?.[0]?.cellRawValue,
              },
          ],
      });
  };
  }
  App.gui = gui;
  export default App;