入口文件

index

该文件是组件的入口,必须通过export default的方式导出一个react组件。

遵循React的单项数据流设计,每当用户改变组件的状态时(如:配置、交互等),平台通过props更新数据和接口函数给组件,组件可以根据props的参数做渲染逻辑。

const MyComponent = props => {
  const { configuration, id, data } = props;
  const { dimension, component } = chart;

  const styles = {
    position: 'absolute',
    ...dimension.chartPosition,
    ...dimension.chartDimension,
    fontFamily: component.fontFamily,
    fontSize: component.fontSize,
    color: component.color
  };

  return (
    <div className="__easyv-component" style={styles} id={id}>
      {data[0].text}
    </div>
  );
};

export default MyComponent;


属性以及平台API相关参数说明


属性:


id: string


平台运行时,每个组件实例都会被自动分配一个组件id,id每次都不相同,用于平台查找组件。

说明:组件的根节点上必须带上id的属性,主要是为了编辑页的组件查找。如果没有带上,则会导致大屏编辑页的组件选择、拖拽等功能失效。


configuration: object | array


该参数为组件开发者自行定义的配置文件main.json中的configuration配置数据。

根据配置项的版本不同,返回的数据有所不同,旧版本为所有配置项都以 _ 开头,会按原数据返回。

{
  ...
	"configuration": [
    {
      "_name": "chart",
      "_displayName": "组件",
      "_value": []
    },
    {
      "_name": "interaction",
      "_displayName": "交互",
      "_value": []
    }
  ]
  ...
}


如果你要解析数据,则需要调用 reduceConfig方法,通过npm i -g @easyv/utils安装对应包。

import { reduceConfig } from '@easyv/utils/lib/common/reduce-config';

<!-- 新版本创建项目后,自带utils文件,可通过以下方式导入 -->
<!-- import {reduceConfig} from './utils/reduce-config' -->

export default function (props) {
  const config = reduceConfig(props.configuration);
	return <div>...</div>
}


新版本则去掉了 _ (推荐使用新版本),平台会做一层处理,将数组的数据转换为对象,不需要开发者自己处理(平台v3.15.0及以上支持,开发环境下开发者工具版本请确保 @easyv/react-component-builder 不低于 v0.13.0)。

{
  ...
	"configuration": [
    {
      "name": "chart",
      "displayName": "组件",
      "value": []
    },
    {
      "name": "interaction",
      "displayName": "交互",
      "value": []
    }
  ]
  ...
}


开发者定义的configuration为组件的默认配置数据,用户在平台修改参数后,该数据也会对应发生变化。


data: array


组件的数据对象,为主数据文件main.data.json中的data属性定义,由平台读取作为组件初始数据,随着用户修改数据源的内容而改变。


childrenConfig: array


子组件配置对象的列表,随着用户添加子组件和修改子组件配置而改变。


childrenData: array


子组件数据对象的列表,随着用户添加子组件和修改子组件数据而改变,与childrenConfig顺序相同。


callbackValues: {[key: string]: any}


回调组件设置的回调对象,每次组件回调数据后,保存其更新了的回调对象。

下图为控制台输出一次回调中的callbackValues:

edit: boolean (需平台 v3.13.0版本及以上才支持)


标记组件是否处于独立编辑模式,默认为false

编辑视图下的组件,可以做一些组件通过可视化的操作来修改组件配置项参数的目的(需要组件自身支持)。

actions: array (需平台 v3.13.0版本及以上才支持)


组件在配置文件中定义的自定义动作数组,即main.json中的actions属性。

events: array (需平台 v3.13.0版本及以上才支持)


组件设置的自定义事件数组,当在平台上为组件添加自定义事件后,平台会保存每个事件对象在该数组中。

配置文件中定义的自定义事件,即triggers属性,并不保存在events中。


width: number (需平台 v3.18.8版本及以上才支持)

组件的宽度,可在main.json中定义初始值。

{
  ...
	"width": 200,
  "height": 70
  ...
}

用户可在平台"样式"选项卡的"位置尺寸"改变其值。

height: number (需平台 v3.18.8版本及以上才支持)


组件的高度,定义与平台配置方法和width属性相同。

top: number (需平台 v3.18.8版本及以上才支持)


组件距离画布顶部的距离,在平台"样式"选项卡的"位置尺寸"改变其值。

left: number (需平台 v3.18.8版本及以上才支持)


组件距离画布左边的距离,平台配置方法与top属性相同。

平台提供的API方法:


onRelative(id: string, data: any): void


该方法在配置组件回调时使用,用于组件通知平台更新回调对象,更新结果会显示在callbackValues中。


  • id: 组件id
  • data: 要更新的回调对象


emit(eventName: string, data: any, componentId?: number): void (需要平台 v3.13.0版本及以上才支持)


该方法用于组件通知平台触发了哪些自定义事件

  • eventName: 组件在主配置文件中定义的triggers的value属性
  • data: data在emit中被用于条件判断。比如,当事件触发后,平台自定义事件中的条件判断为s==1,那么emit会检测data中s的值是否满足该条件
  • componentId: 发送事件的组件的id,
    • 如果没有子组件,则可不传,不传为当前组件id,
    • 如果有子组件,不传则为父组件id,如果是子组件则必须传子组件的id.

emitEvent(payload): void

payload为组件触发事件后需要更新的状态,包含id、state、activeState、config的一些值。

该事件用于组件旧版本的交互事件配置,已不推荐使用,建议用emit,并使用 events配置项来自定义触发的事件。

updateConfig({id?, type, payload}) (需要平台 v3.13.0版本及以上才支持)


该方法用于组件更改自身的配置和数据对象


  • id:可不传,默认为当前组件的id,如果是子组件的更新,则必须传子组件的id,不然会更新失败。
  • type: 'config' | 'data' | 'actions' | 'camera'
    • config: 更新组件的configuration属性。
      • 在v4.13.0之前,用于更新config,只能是组件进入编辑模式,即edit为true的时候才支持
      • v4.13.0及以上,支持组件在非编辑模式下,也可以支持更新config配置,但只在编辑页面才生效。
    • data: 更新组件的data静态数据
    • actions: 用于动态更新组件的actions配置。使用场景为:自定义动作中可能存在一些动态的数据,需要在其他配置项发生变化的时候,需要动态更新,比如场景的镜头数据等。
    • camera: 该类型是在镜头数据保存的时候才需要用到,一般不是三维的镜头数据使用不上。
  • payload: 当type === 'data'时,payload为静态数据数组,否则为{path, field, value} | {path, field, value}[]
    • path: string 需要更新的config属性路径,如['chart', 'component', 'color']
    • field: string 需要更新的控件属性,默认为value
    • value: any 控件属性对应的值

如遇其他使用问题,可扫描下方二维码,获取更多产品支持~

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群