# 组件主入口文件index介绍
index.js文件是组件的主入口文件，该文件提供了一个文本组件的示例代码供您参考，并介绍了index.js文件中常用的组件生命周期和相关函数。该文本组件示例展示度量字段的值，并允许对文本进行样式设置。
表1组件方法 
| 函数                    | 说明                                                                                                                                                                                                                                                                                                                                                                                                          |
|:---|:---|
| refresh()             | 默认渲染方法，当组件初始化和重绘时被调用。                                                                                                                                                                                                                                                                                                                                                                                       |
| resize(attr)          | 缩放，当组件被拖拽、缩放时被调用。 attr: 组件大小、位置信息，参考[attr参数说明]。                                                                                                                                                                                                                                                                          |
| loadData()            | 更新组件数据，当组件加载数据时调用。                                                                                                                                                                                                                                                                                                                                                                                          |
| eventEmit(eventParam) | - 可选方法，触发组件交互事件，在需要触发交互的函数中调用该方法：this.eventEmit(eventParam)，此方法需要在gui.json中配置组件交互事件（event）。  - eventParam：交互参数，该方法使用说明参考[eventEmit方法使用]。   |
   
 表2attr参数说明 
| 参数 | 是否必选 | 参数类型   | 描述           |
|:---|:---|:---|:---|
| w  | 否    | Number | 组件宽度(单位：像素)。 |
| h  | 否    | Number | 组件高度(单位：像素)。 |
   
- eventParam参数说明。
  表3eventParam参数说明 
  | 参数     | 是否必选 | 参数类型              | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                          |
  |:---|:---|:---|:---|
  | key    | 是    | select、drive、link | - select：允许组件在交互面板里通过交互编辑的方式定义交互事件，该事件和drive、link类型不支持同时配置。  - drive：允许组件在交互面板里配置联动，和select类型不支持同时配置。  - link：允许组件在交互面板里配置跳转。   |
  | params | 是    | Object            | 事件触发字段和其值，参考[params说明]。                                                                                                                                                                                                                                                                                                                                                                      |
     
  eventParam参数中params说明。
   表4params说明 
  | 参数      | 是否必选 | 参数类型             | 描述                                                      |
  |:---|:---|:---|:---|
  | 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说明]。     |
     
   表6jsondata说明 
  | 参数                | 参数类型  | 描述                                                                                  |
  |:---|:---|:---|
  | dataBind.dataArea | Array | 数据面板绑定的字段信息，为数组结构，详细信息参考[dataArea项说明]。 |
  | originData        | Array | 实时获取的数据值，详细信息参考[originData说明]。            |
     
   表7dataArea项说明 
  | 参数         | 参数类型   | 描述                                                                                                                                                                 |
  |:---|:---|:---|
  | areaId     | Object | gui.json中配置的数据槽位类型，可选值参考[AreaId说明](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0557.html#dataartsinsight_03_0557__li6763215118)。 |
  | columnList | Array  | 使用组件在大屏或仪表板搭建时，在数据面板槽位中拖拽的字段信息，字段信息说明参考[columnList说明]。                                                                 |
     
  
- columnList说明
  该值为数组，数组的每一项对应一个数据集字段信息。
  表8数据槽位字段信息说明 
  | 参数      | 参数类型                     | 描述                                       |
  |:---|:---|:---|
  | id      | String                   | 唯一标识的字段id，调用交互函数eventEmitter方法时，需要传入该id。 |
  | caption | String                   | 字段对应名字。                                  |
  | type    | 'dimension' \| 'measure' | 字段类型，dimension为维度，measure为度量。            |
     
  
- originData说明
  存放实时获取的数据值，通过this.config.jsondata.originData获取。
  originData为二维数组，第一行数据为表头，存放字段信息，没有具体值。第二行及后存放数据。
  数据行的每一个数据项对应数据面板中槽位的一个字段，数据项说明见[表9]。
   表9originData数据项说明 
  | 参数           | 参数类型             | 描述               |
  |:---|:---|:---|
  | 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;
  ```