gz_modules
0.2.4 • Public • Published 大数据平台模块库
将模块enum{组件、筛选器、组}拆开单独维护
模块负责接受配置、数据渲染,提供暴露用户行为的接口。从业务逻辑中解耦
组件
筛选器
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 组件,只需要:
然后在弹出的页面中点击 demo 文件夹即可!
打包
打包指的是将 React 组件编译打包成 js 和 css 文件,方便其他组件调用,只需要:
发布
发布指的是将 React 组件发布到 npm 仓库中,首先执行此命令重新指定你的 npm 包的 name 和 version 等信息:
然后,登录 npm:
最后,发布:
调用 React 组件
发布完成后,就可以在调用了。
首先,安装你发布的 React 组件
然后,在代码中调用:
import modules from 'gz_modules';
就可以使用了!
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads