为低代码平台提供Echarts配套设置面板。其中导出部分常用方法和设置组件。

环境要求

$ node -v
$ v12.22.1
$ yarn -v
$ 1.22.10

预装依赖

确保项目中预装React版本且大于等于17.0.2

如何安装

1. 可直接以git作为依赖进行安装(仓库已迁移，请勿使用此方式。因为版本太过老旧)

$ npm i ssh://[email protected]:36000/FlyFish/chart-panel.git

2. 使用私源进行安装

• 需预设置scope镜像地址。

  # .npmrc
  @cloudwise-fe:registry=http://10.2.2.38/

• 设置好镜像即可进行安装

  $ npm i @cloudwise-fe/chart-panel

如何使用

import { Tooltip, ... } from '@cloudwise-fe/chart-panel'

每个面板组件都拥有一些基础共同的props。因为面板的实质是封装了部分form表单。下面可以对标的注明每个属性最终的映射点

export interface ICommonPanelProps {
  values: TRecord; // 对应form 的 initialValues
  onChange: (changeValues: TRecord, allValues: TRecord) => void; // 对应form 的 onValuesChange
  tooltipPrefix?: string; // 该属性为面板内部所有formItem的tooltip的前缀。
}

每个可用组件都拥有基础共同的props。因为我们为了更好的配合form使用。模拟了表单组件的行为(注意: 组件可受控也可不受控)。下面可以对标的注明每个属性最终的映射点

export interface ICommonFormItemChildrenProps<R> {
  value?: R; // 组件的值
  onChange: (value: R, ...args: any[]) => void; // 组件值变更时函数
}

查看所有可用组件或方法导出

查看所有内置的变量

FAQ

1. 为什么部分方法未导出?

   未导出的方法为当前项目的私有方法。需配合其他代码一同食用。故请勿直接使用。如有问题不做处理。

2. 为什么样式异常?

• 第一: 若使用的为低代码平台, 请确保 options.js 中声明了enableLoadCssFile = true; 该变量会显式的去加载当前组件的设置面板css;
• 第二: 检查是否开启了cssModule. 导致node_modules中的样式被编译。该问题请自行解决。