更新时间:2024-06-20 GMT+08:00
分享

Index.js规范

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

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

表1 组件方法

函数

说明

refresh()

默认渲染方法,当组件初始化和重绘时被调用。

resize(attr)

缩放,当组件被拖拽、缩放时被调用。

attr: 组件大小、位置信息,参考attr参数说明

loadData()

更新组件数据,当组件加载数据时调用。

eventEmit(eventParam)

  • 可选方法,触发组件交互事件,在需要触发交互的函数中调用该方法:this.eventEmit(eventParam),此方法需要在gui.json中配置组件交互事件(events)。
  • eventParam:交互参数,该方法使用说明参考eventEmit方法使用
表2 attr参数说明

参数

是否必选

参数类型

描述

w

Number

组件宽度(单位:像素)。

h

Number

组件高度(单位:像素)。

  • 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;

相关文档