自定义组件

本地二次开发自定义定制化组件。

改动位置包括：

• 组件类型定义
• 组件列表定义
• 组件引入添加
• 组件开发文件夹

组件类型定义

目录：/src/component.d.ts

  declare namespace ComponentData {
    export type TComponentSelfType = "CUSTOM_COMPONENT_TYPE" // 自定义组件的类型
  }

组件列表定义

目录：/src/utils/constants/components.tsx

  type COMPONENT_TYPE_LIST = {
    type: string  // 组件的类型
    icon: string  // 组件的显示图标
    title: string // 组件的名称
  }

组件引入添加

目录：/src/components/ChartComponents/index.ts

  import CustomComponent from '/path/to/component'

  COMPONENT_MAP.set(CustomComponent.label, CustomComponent)

组件开发文件夹

目录：/src/components/ChartComponents/CustomComponent
CustomComponent为自定义的文件夹名称

类型定义文件

/src/components/ChartComponents/CustomComponent/type.ts
组件特殊化配置的类型文件。

组件配置文件

/src/components/ChartComponents/CustomComponent/config
配置文件的文件夹，包含组件的所有配置。

• 只需要包含组件的特殊化配置。

props为：

  export type IProps<T extends object = {}> = {
    value: TComponentData<T>;
    onChange: (value: SuperPartial<TComponentData<T>>) => void;
  };

格式为：

  import { Component } from 'react';
  import { Tabs } from 'antd';
  import ComponentOptionConfig, {
    Tab,
  } from '@/components/ChartComponents/Common/ComponentOptionConfig';
  import ConfigList from '@/components/ChartComponents/Common/Structure/ConfigList';
  import { TBarBasicConfig } from '../type';

  const { TabPane } = Tabs;

  const TemplateComponent = (props: IProps) => {

    const { value, onChange } = props 

    return (
      <ComponentOptionConfig>
        <TabPane key={'1'} tab={<Tab>配置类型1</Tab>}>
          <ConfigList level={1}>
            配置内容
          </ConfigList>
        </TabPane>
      </ComponentOptionConfig>
    )

  }

默认配置文件

/src/components/ChartComponents/CustomComponent/defaultConfig.ts
组件的默认样式属性配置。

• 通过设置默认配置可以关闭相关不需要开启的通用功能。

  export default {
    interactive: {
      base: [], // 没有交互事件
    },
    data: {
      disabled: true // 没有数据获取配置
    }
  }

渲染组件文件

/src/components/ChartComponents/CustomComponent/component
实际渲染在画布中的样式。

  import {
    useComponent, // 提供了组件的实用方法的hook
    useChartComponentResize, // 屏幕发生变化的hook
    useChartValueMapField, // 字段映射的hook
    useComponentResize, // 组件大小发生变化的hook 
    useAnimationChange, // echarts的animation发生变化的hook
    useCondition, // 组件条件处理的hook
    useChartComponentTooltip, // echart的tooltip轮播hook
    useChartPerConfig, // echart的config预处理hook 
  } from '@/components/ChartComponents/Common/Component/hook';

  import FetchFragment, {
    TFetchFragmentRef,
  } from '@/components/ChartComponents/Common/FetchFragment'; // 数据交互的wrapper 

  export type IProps<T> = {
    className?: string;
    style?: CSSProperties;
    value: ComponentData.TComponentData<T>;
    global: ComponentProps['global'];
  }

提示

关于以上的细节请自行查看对应的已内置的组件的代码。

导出文件

/src/components/ChartComponents/CustomComponent/index.ts

  import defaultConfig from './defaultConfig';
  import Component from './component';
  import Config from './config';

  // 需要导出以下几个属性
  export default {
    defaultConfig,
    configComponent: Config,
    render: Component,
    type: Component.id,
  };