Energy-flow-chart NPM

简介

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)
    },
  }
}

energy-flow-chart energy flow chart 流程图能源流向图

@everything-registry/sub-chunk-1586

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago