Tmwg-react-ui NPM

组件使用文档

Button

引用：

<Button value='按钮' />

属性名称	说明	类型	默认值
value	按钮名称	String	''
danger	设置危险按钮	boolean	false
export	设置导出按钮	boolean	false
close	设置取消按钮	boolean	false
disable	按钮失效状态	boolean	false
icon	设置按钮的图标类名	String	''
className	设置按钮类名	String	''
style	设置自定义样式	Object	-
onClick	点击按钮时的回调	(event) => void	-

圆环占比图

图表配置数据格式：

ringOption = {
    color: ['#EE3446', '#FF5548'],
    fontSize: 50,
    fontColor: '#1C2238',
    type: 'per'
}
value = 占比值/数值

引用：

 <RingChart option={ringOption} value={60} />

属性名称	说明	类型	默认值
color	圆环渐变色值	Array	'#EE3446', '#FF5548'
fontSize	字体大小	Number	50
fontColor	字体颜色	String	'#1C2238'
type	圆环类型(per-百分比圆环)	String	''
value	占比值/数值	Number/String	''
customOption	自定义配置项（自定义可参考echarts配置手册）	Object	-

饼图

图表配置数据格式：

pieOption = {
    color: ['#6699FF', '#B3CDFF', '#52CCA3', '#A1E6CE', '#7D8FB3'],
    fontSize: 14,
    fontColor: '#1C2238',
}
pieData = [
    {value: 1048, name: '搜索引擎'},
    {value: 735, name: '直接访问'},
    {value: 580, name: '邮件营销'},
    {value: 484, name: '联盟广告'},
    {value: 300, name: '视频广告'}
]

引用：

 <PieChart option={pieOption} data={pieData} />

属性名称	说明	类型	默认值
color	饼图数据对应色值	Array	'#6699FF', '#B3CDFF', '#52CCA3', '#A1E6CE', '#7D8FB3'
fontSize	字体大小	Number	14
fontColor	字体颜色	String	'#1C2238'
data	数据	Array	[]
customOption	自定义配置项（自定义可参考echarts配置手册）	Object	-

漏斗图

图表配置数据格式：

funnelOption = {
    color: ['#FFBC96', '#DD4218', '#B21A01'],
    fontSize: 14,
    fontColor: '#1C2238',
    legendName: '网格',
    title: '线损率排名',
    showLegendData: false,
    type: 'per'
}
funnelData = [
    {value: 60, name: '一般'},
    {value: 40, name: '异常'},
    {value: 20, name: '严重'}
]

引用：

 <FunnelChart option={funnelOption} data={funnelData} />

属性名称	说明	类型	默认值
color	漏斗图数据对应色值	Array	'#FFBC96', '#DD4218', '#B21A01'
fontSize	字体大小	Number	14
fontColor	字体颜色	String	'#1C2238'
legendName	图例名称	String	''
title	图表标题	String	''
showLegendData	是否显示图例指标值	Boolean	false
type	图表类型(per-百分比)	String	''
data	数据	Array	[]
customOption	自定义配置项（自定义可参考echarts配置手册）	Object	-

排名柱图

图表配置数据格式：

rankBarOption = {
    fontSize: 14,
    fontColor: '#1C2238',
}
rankBarData = [
    {color: '#B21A01', value: 100, name: '供电故障'},
    {color: '#B21A01', value: 80, name: '供电故障'},
    {color: '#B21A01', value: 60, name: '供电故障'},
    {color: '#DD4218', value: 40, name: '供电异常'},
    {color: '#DD4218', value: 20, name: '供电异常'},
    {color: '#DD4218', value: 10, name: '供电异常'},
    {color: '#FFF2EB', value: 5, name: '供电正常'},
    {color: '#FFF2EB', value: 1, name: '供电正常'}
]

引用：

<RankBarChart option={rankBarOption} data={rankBarData} />

属性名称	说明	类型	默认值
fontSize	字体大小	Number	14
fontColor	字体颜色	String	'#1C2238'
data	数据	Array	[]
customOption	自定义配置项（自定义可参考echarts配置手册）	Object	-

线图

图表配置数据格式：

lineOption = {
    yUnit: '',
    yShowLabel: false,
    showLegend: false,
    legendType: '',
    fontSize: 14,
    fontColor: '#1C2238',
    lineItem: [{
      color: '#0095FF',
      name: '指标1',
      unit: '',
      showArea: false
    }]
}

let data = []
for (let i = 0; i < 100; i++) {
    data.unshift({
        time: moment(new Date().getTime() - i * 10000).format('HH:mm'),
        value: parseInt(Math.random() * 200),
        status: parseInt(Math.random() * 2)
    })
}

const lineData = [data]

引用：

<LineChart option={lineOption} data={lineData} />

属性名称	说明	类型	默认值
yUnit	y轴单位	String	''
yShowLabel	y轴刻度值是否显示	Boolean	false
showLegend	图例是否显示	Boolean	false
legendType	图例类型(默认显示线形图例，设置'rect'为矩形图例)	String	''
fontSize	字体大小	Number	14
fontColor	字体颜色	String	'#1C2238'
color	线条颜色	String	''
name	线条指标名称	String	''
unit	线条指标单位	String	''
showArea	线条是否显示阴影区域	Boolean	false
data	数据(二维数组：time-时间、value-数值、status: 0-不显示指标圆点，1-显示指标圆点)	Array	[]
customOption	自定义配置项（自定义可参考echarts配置手册）	Object	-

拓扑图

设备组件(数据处理模版可自行定义)

deviceData = [{
    deviceType: 'transformer',
    deviceName: 'xxx变压器',
}]

引用：

<DevicePanel params={deviceData} />

属性名称	说明	类型	默认值
deviceType	设备类型(transformer-变压器、incoming-进线柜、outgoing-出线柜、branchBox-分支箱、meterBox-表箱)	String	''
deviceName	设备名称	String	''
customClass	自定义类名	String	''

电流组件(数据处理模版可自行定义)

currentData = {
    row: [{
        status: 0,
        isShowCurrent: true,
        isCloseAnimate: false,
    }],
    column: [{
        status: 0,
        isShowCurrent: true,
        isCloseAnimate: false,
    }, {
        status: 0,
        isShowCurrent: true,
        isCloseAnimate: false,
    }]
}

引用：

<CurrentPanel params={currentData} />

电流组件

属性名称	说明	类型	默认值
row	横向电流数据	Array	[]
column	纵向电流数据	Array	[]
status	电流状态（0-正常 1-异常 2-故障 3-严重）	Number	0
isShowCurrent	是否显示电流	Boolean	false
isCloseAnimate	是否显示出口测开关状态电流（是否关闭电流动画效果）	Boolean	false

组合表箱组件(数据处理模版可自行定义)

meterBoxData = [{
    parent: {
        deviceStatus: 0,
        isShowCurrent: true,
        isCloseAnimate: false,
    }
    meterBox: [{
        deviceStatus: 0,
        deviceName: '表箱1',
        isCloseAnimate: false,
        isShowCurrent: true
    }]
}]

引用：

<MeterBox parent={meterBoxData[0].parent} params={meterBoxData[0].meterBox} />

属性名称	说明	类型	默认值
parent	所属上级设备基本状态信息	Object	-
deviceStatus	电流状态（0-正常 1-异常 2-故障 3-严重）	Number	0
isShowCurrent	是否显示电流	Boolean	false
isCloseAnimate	是否显示出口测开关状态电流（是否关闭电流动画效果）	Boolean	false
deviceName	单个表箱名称	String	''