组件使用文档

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

纵向拓扑组件

引用：

<TopologyPanel />

| 属性名称 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | data | 拓扑结构数据 | Array | [] row | 拓扑结构是否显示横向布局 | Boolean | false onClick | 点击设备时的回调 | (event) => void | -