Lineage & impact

更新

最新版本v0.2.0

• 重新实现连接线，不使用第三方插件，解决全局绝对定位的问题
• 布局高低自适应
• 提供render方法，重新渲染布局（例如：左侧菜单宽度变化）

安装

npm i lineage-impact --save

npm地址点这里

数据格式在这里

构建

npm run build-lib
# update version from  package.json
npm publish

使用

<template>
  <div id="app">
    <button @click="$refs.lineage.render()">render</button>
    <button @click="handleChange">change</button>
    <Lineage ref="lineage" :source="source"></Lineage>
  </div>
</template>

<script>
import Lineage from './components/index.js'
import source from './mock/source.js'

export default {
  name: 'app',
  components: {
    Lineage
  },
  data () {
    return {
      source: null
    }
  },
  created () {
    this.queryData()
  },
  methods: {
    queryData () {
      setTimeout(() => {
        this.source = source
      }, 200);
    },
    handleChange () {
      this.source.downstream.push({
        type: {
          name: 'Lake',
          color: '#445566'
        },
        data: {
          name: 'Dynamic addition',
          icon: 'database',
          iconColor: 'blue'
        }
      })
    }
  }
}
</script>