@cwmont/pro-components
v0.0.17-alpha.0
Published
通用公共组件
Downloads
4
Readme
@cwmont/pro-components 公共增强组件 基于 dumi + father-build + lerna 多包管理模版
feature
- ✅ 多包管理
- ✅ 单元测试
- ✅ 文档阅读
- ✅ eslint 规范
- ✅ cjs + esm 编译
- ✅ typescript
项目规范
- packages
- pro-components ---> @cwmont/pro-components 通用 ppfish 增强组件,不涉及业务逻辑
- EchartsMap(地图组件下钻)
- ......
- pro-components ---> @cwmont/pro-components 通用 ppfish 增强组件,不涉及业务逻辑
测试约定
目录规范
.
├── package.json
├── packages
│ ├── bs-components
│ │ └── src
│ │ └── YsHeader
│ │ └── __test__
│ │ └── index.test.tsx # 插件测试用例
├── tsconfig.json
├── .fatherrc.ts
└── yarn.lock
组件使用
npm i @cwmont/pro-components
...
import { EchartsMap } from '@cwmont/pro-components';
...
<EchartsMap options={options} />
options传入方式和echars一致 目前只做了地图下钻 后续修改 完善组件包
option例子:
const options = {
tooltip: {
show: false,
},
title: {
top: 20,
// text: '用户注册区域展示',
subtext: '',
x: 'center',
textStyle: {
color: '#000',
},
},
geo: {
map: 'china',
roam: true,
// zoom: 1.23,
// center: [105, 36], 如果下钻 不传这个值
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
fontSize: '12',
color: '#FFF',
},
emphasis: {
// show: false,
fontSize: '8',
color: '#FFF',
},
},
itemStyle: {
normal: {
borderColor: '#4C63E5', // 地图边框颜色
borderWidth: 2, // 地图边框大小
areaColor: '#050934', // 各个省份颜色
},
emphasis: {
areaColor: '#050934', // hover颜色
},
},
},
};