Gz_modules NPM

大数据平台模块库

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

组件

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

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';

就可以使用了！

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago