简介

energy-flow-chart，能源流线图。

快速开始

npm i energy-flow-chart -S

快速应用

全局注入

import EnergyFlowChart from 'energy-flow-chart'
app.use(EnergyFlowChart);

局部注入

import { EnergyFlowChart } from 'energy-flow-chart';
export default {
  name: 'App',
  components: {
    EnergyFlowChart
  }
}

主参数

参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ v-model | Boolean | √ | false | | 是否默认展开。 data | Array | √ | | | 能源流向图数据，树形结构。 opts | Object | × | { label: 'label', id: 'id', children: 'children', iconUrl: 'iconUrl', dataVal1: 'dataVal1', dataVal2: 'dataVal2' } | | 参数。 iconUrlTypes | Array | × | ['1', '2', '3', '4', '5', '0'] | | 字典值对应关系： 1电 2水 3油 4煤 5气 0其他。用于展示不同的设备图片。暂时只提供以上6种设备图片。 bgColor | String | × | #07364B | | 背景颜色。 lineColor | Array | × | [ '#FFCC44' ] | | 流向箭头不同层级不同颜色，索引0为1级颜色以此类推，未设置则使用默认颜色。例如：['#014EB5', '#A800FF']。

opts参数

参数 | 类型 | 必填项 | 默认值 | 说明 ---- | ----- | ------ | ------ | :------ label | String | × | label | 设备名称。 id | String | × | id | 设备唯一标识。 children | String | × | children | 下级数据。 imgUrl | String | × | imgUrl | 图片。 iconUrl | String | × | iconUrl | 内置图片，imgUrl不存在时匹配iconUrlTypes使用。 dataVal1 | String | × | dataVal1 | 数据1。 dataVal2 | String | × | dataVal2 | 数据2。

方法

参数 | 类型| 解释 ---- | ----- | :------ @energyClick | 点击回调 | (obj) => {}。

示例

常规

<EnergyFlowChart
  v-if="energyFlowData.length > 0"
  v-model="develop"
  :data="energyFlowData"
  :opts="{
    id: 'deviceId',
    iconUrl: 'energyType',
    dataVal1: 'eval',
    dataVal2: 'power',
  }"
  :lineColor="['red']"
  @energyClick="energyClick">
</EnergyFlowChart>

export default {
  name: 'App',
  data() {
    return {
      develop: true,
      energyFlowData: [],
    };
  },
  mounted() {
    this.setRemUnit()
    const energyFlowData = [{
      "energyType": "2",
      "eval": "0.00kWh",
      "imgUrl": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0409%2F2fc95034j00sbnoh00013d000j600j6c.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
      "children": [{
        "energyType": "2",
        "eval": "0.00kWh",
        "label": "设备1",
        "power": "555.00KW",
        "deviceId": 52
      }, {
        "energyType": "2",
        "eval": "0.00kWh",
        "children": [{
          "energyType": "2",
          "eval": "0.00kWh",
          "children": [{
            "energyType": "2",
            "eval": "0.00kWh",
            "label": "设备4",
            "power": "/KW",
            "deviceId": 55
          }, {
            "energyType": "2",
            "eval": "0.00kWh",
            "label": "设备5",
            "power": "/KW",
            "deviceId": 56
          }],
          "label": "设备6",
          "power": "/KW",
          "deviceId": 54
        }],
        "label": "设备2",
        "power": "0.00KW",
        "deviceId": 53
      }],
      "label": "设备3",
      "power": "900.00KW",
      "deviceId": 47
    }];
    this.energyFlowData = energyFlowData;
  },
  methods: {
    toggleExpandAll() {
      this.develop = !this.develop;
    },
    // 回调，点击节点的回调，node为节点对象
    energyClick(node) {
      console.log(node)
    },
  }
}