# relationship-map

**Repository Path**: jinan5694/relationship-map

## Basic Information

- **Project Name**: relationship-map
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Relationship Map
![Relationship Map](/public/banner.png)
## 安装
```bash
npm i relationship-map --save
```
### npm地址点[这里](https://www.npmjs.com/package/relationship-map)
## 使用
```html
<template>
  <div id="app">    
    <RelationshipMap :data="data">
      <div slot="center">
        <Label text="nps"  icon="table" :icon-color="iconColor"/>
      </div>
      <div slot="leftTop">
        <Label text="NPS..."  icon="file" :icon-color="iconColor"/>
        <Label text="Pears..."  icon="file" :icon-color="iconColor"/>
        <Label text="Infllg..."  icon="file" :icon-color="iconColor"/>
      </div>
      <div slot="rightTop">
        <Label text="Louis"  icon="personal" :icon-color="iconColor"/>
        <Label text="Gaura.."  icon="personal" :icon-color="iconColor"/>
      </div>
      <div slot="leftBottom">
        <Label text="Net promote..."  icon="folder" :icon-color="iconColor"/>
      </div>
      <div slot="rightBottom">
        <Label text="Gender"  icon="database" :icon-color="iconColor"/>
        <Label text="User"  icon="database" :icon-color="iconColor"/>
        <Label text="Test"  icon="database" :icon-color="iconColor"/>
      </div>
    </RelationshipMap>
  </div>
</template>

<script>
import RelationshipMap from './components/RelationshipMap'
import Label from './components/Label'

export default {
  name: 'app',
  components: {
    RelationshipMap,
    Label
  },
  data () {
    return {
      data: {
        leftTop: {title: 'Reports', count: 3, color: 'orange'},
        rightTop: {title: 'Users', count: 2},
        leftBottom: {title: 'Business Terms', count: 1},
        rightBottom: {title: 'Data Domains', count: 3}
      },
      iconColor: 'lightblue'
    }
  },
  created () {
    
  },
  methods: {
    
  }
}
</script>

<style lang="scss">
html, body {
  height: 100%;
}
body {
  margin: 0;
}
#app {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  height: 100%;
}
.content {
  background-color: yellow;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  display: flex;
  height: 100%;
  .left,
  .right {
    width: 50%;
    height: 100%;
  }
}
</style>
```