relationship-map v0.1.5

Relationship Map

安装

npm i relationship-map --save

npm地址点这里

使用

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