1.5.21 • Published 3 years ago

@cloudwise-fe/chart-panel v1.5.21

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

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

环境要求

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

预装依赖

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

如何安装

  1. 可直接以git作为依赖进行安装(仓库已迁移,请勿使用此方式。因为版本太过老旧)
$ npm i ssh://git@git.cloudwise.com:36000/FlyFish/chart-panel.git
  1. 使用私源进行安装
  • 需预设置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中的样式被编译。该问题请自行解决。