大数据平台模块库

将模块enum{组件、筛选器、组}拆开单独维护
模块负责接受配置、数据渲染，提供暴露用户行为的接口。从业务逻辑中解耦

组件

• [x] chart.common图标共同参数
• [x] chart.line折线图
• [x] chart.area面积图
• [x] chart.bar柱状图
• [x] chart.bar_stack堆叠柱状图
• [x] chart.bar_row条形图
• [x] chart.bar_row_stack堆叠条形图
• [x] chart.pie饼图
• [x] chart.rose玫瑰图
• [x] chart.rose_ring玫瑰环图
• [x] chart.scatter散点图/气泡图
• [x] chart.radar雷达图
• [x] chart.nested_ring嵌套环形图
• [x] chart.funnel漏斗图
• [x] chart.gauge仪表盘
• [x] chart.heatmap色块图
• [x] chart.line_bar折柱图
• [x] chart.wordCloud词云
• [x] chart.rect_tree矩状树图
• [ ] textbox指标卡
• [ ] textarea文字域
• [x] image图片
• [x] shape.rect矩形
• [x] shape.circle圆形
• [x] shape.line直线
• [x] shape.arrow箭头
• [x] table表格

筛选器

• [x] filter.list列表筛选器
• [x] filter.text文本筛选器
• [x] filter.date时间筛选器

module.common

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | requestDelete | 请求删除 | func | | requestCopy | 请求复制 | func | | requestChangeZindex | 请求改变层级 | func | | requestLocationChange | 请求位置改变 | func | | requestSizeChange | 请求大小改变 | func | | kind | 模块种类 | enum{component,filter,group} | | type | 模块类型 | * | | moduleId | 模块id | string | | title | 标题 | { value, show, style:{color,fontSize,fontFamily,textAlign,background} } | | style | 模块样式 | {background,border,borderRadius} | | size | 模块大小 | {width,height} | | location | 模块位置 | {top,left} | | isEdit | 模块是否被选中 | bool | | zIndex | 模块层级 | number | | activeGroup | 是否激活组 | bool |

chart.common

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | chartConfig | 图表配置 | {axis,legend,draw,textStyle} | | chartType | 图表类型 | string | | data | 图表数据 | any | | border | 边框 | string | | borderRadius | 边框弧度 | number | | onClick | 点击图标接口 | func |

chart.line

无特异性配置

chart.bar

无特异性配置

chart.area

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.areaStyle | 面积图样式 | object |

chart.bar_stack

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.stack | 数据堆叠 | string |

chart.bar_row

无特异性配置

chart.bar_row_stack

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.stack | 数据堆叠 | string |

chart.rose

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.radius | 半径 | array | | series.roseType | 是否展示成南丁格尔图 | object | | series.center | 中心（圆心）坐标 | array | | series.symbolSize | 标记的大小 | object |

chart.rose_ring

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.radius | 半径 | array | | series.roseType | 是否展示成南丁格尔图 | object | | series.center | 中心（圆心）坐标 | array | | series.symbolSize | 标记的大小 | object |

chart.scatter

 无特异性配置

chart.nested_ring

 无特异性配置

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.radius | 半径 | array | | series.roseType | 是否展示成南丁格尔图 | object | | series.center | 中心（圆心）坐标 | array | | series.symbolSize | 标记的大小 | object |

chart.funnel

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | series.minSize | 数据最小值 min 映射的宽度 | string | | series.maxSize | 数据最大值 max 映射的宽度 | string | | series.sort | 数据排序 | string |

chart.gauge

 无特异性配置

chart.heatmap

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | yAxis.splitArea | 坐标轴在 grid 区域中的分隔区域 | Object | | visualMap | 视觉映射组件 | Object |

textbox

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | width | 宽度 | string | | height | 高度 |string|

chart.line_bar

 无特异性配置

chart.wordCloud

 无特异性配置

chart.rect_tree

 无特异性配置rect_tree

textarea

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | value | 文本内容 | string | | onTextChange | 文本改变接口 | func |

image

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | imgUri | 图片地址 | string | | width | 宽度 | string | | height | 高度 |string|

shape.rect

无差异性配置

shape.circle

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | width | 宽度 | string | | height | 高度 |string|

shape.line

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | width | 宽度 | string | | height | 高度 |string| | lineBackgroud | 线条颜色 | string |

shape.arrow

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | width | 宽度 | string | | height | 高度 |string| | lineBackgroud | 线条颜色 | string |

table

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | data | 数据 | [] | | columnsToRow | 行列转换 | bool | | otherStyle.table | table:otherStyle.table | object | | order | 是否添加序号 | bool | | pageSize | 每页条数 | number |

table:otherStyle.table

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | columnsToRow | 行列转换 | bool | | pageSize | 每页条数 | num | | tableHeader | 表头 | {visible,color,fontSize,fontFamily,fontWeight,textAlign,background}| | tableBody | 表主体 | {wordBreak,color,fontSize,fontFamily,fontWeight,textAlign,background:{main,odd,even}},grid:{xVisivle,yVisible,color}|

filter.list

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | operationType | 操作方式 | enum{list,dropdown,nav} | | isMultiple | 是否多选 | bool | | otherStyle.option | 选项区样式 | {color,fontSize,fontFamily} | | onConditionChange | 条件改变接口 | func |

filter.date

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | otherStyle.option | 选项区样式 | {color,fontSize,fontFamily} | | onConditionChange | 条件改变接口 | func |

filter.text

| 属性 | 属性说明 | 属性类型 | | -------- | -------- | :----: | | otherStyle.option | 选项区样式 | {color,fontSize,fontFamily} | | onConditionChange | 条件改变接口 | func |

调试

调试指的是本地调试 React 组件，只需要：

npm start

然后在弹出的页面中点击 demo 文件夹即可！

打包

打包指的是将 React 组件编译打包成 js 和 css 文件，方便其他组件调用，只需要：

npm run build

发布

发布指的是将 React 组件发布到 npm 仓库中，首先执行此命令重新指定你的 npm 包的 name 和 version 等信息：

npm init

然后，登录 npm：

npm login

最后，发布：

npm publish

调用 React 组件

发布完成后，就可以在调用了。

首先，安装你发布的 React 组件

npm i gz_modules --save

然后，在代码中调用：

import modules from 'gz_modules';

就可以使用了！