Index.js规范
Index.js文件是组件的主入口文件,该文件提供了一个示例供您参考,并介绍了index.js文件中常用的组件生命周期或相关函数。
示例组件为一个文本组件:展示度量字段的值,并允许对文本进行样式设置。
函数 |
说明 |
---|---|
refresh() |
默认渲染方法,当组件初始化和重绘时被调用。 |
resize(attr) |
缩放,当组件被拖拽、缩放时被调用。 attr: 组件大小、位置信息,参考attr参数说明。 |
loadData() |
更新组件数据,当组件加载数据时调用。 |
eventEmit(eventParam) |
|
- eventParam参数说明。
表3 eventParam参数说明 参数
是否必选
参数类型
描述
key
是
select、drive、link
- select:允许组件在交互面板里通过交互编辑的方式定义交互事件,该事件和drive、link类型不支持同时配置。
- drive:允许组件在交互面板里配置联动,和select类型不支持同时配置。
- link:允许组件在交互面板里配置跳转。
params
是
Object
事件触发字段和其值,参考params说明。
eventParam参数中params说明。
- 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说明
- originData说明
存放实时获取的数据值,通过this.config.jsondata.originData获取。
originData为二维数组,第一行数据为表头,存放字段信息,没有具体值。第二行及后存放数据。
数据行的每一个数据项对应数据面板中槽位的一个字段,数据项说明见表9。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;