v-svg-chain v0.1.2

v-svg-chain 用于svg链式数据展示

v-svg-chain- 横向

用于svg链式数据展示, 仅需传递 data即可。

<template>
  <v-svg-chain @clickItem="testClick" style="height: 300px;" :data="originData" :style="{ backgroundColor: 'black' }"></v-svg-chain>
   <button @click="changeData">测试</button>
</template>
<script>
 const chainData = require('../../mock/kill-chain.json')
  export default {
    data () {
      return {
        originData:[
          {
            "key": "/System_Compromise",
            "name": "数据变更",
            "value": 232
          },
          {
            "key": "/Exploitation_Installation",
            "name": "安装&植入",
            "value": 211
          },
          {
            "key": "/Delivery_attack",
            "name": "传送&攻击",
            "value": 189
          },
          {
            "key": "/Delivery_attack1",
            "name": "测试数据",
            "value": 166
          },
          {
            "key": "/Exploitation_Installation",
            "name": "安装&植入",
            "value": 211
          },
          {
            "key": "/Delivery_attack",
            "name": "传送&攻击",
            "value": 189
          },
          {
            "key": "/Delivery_attack1",
            "name": "测试数据",
            "value": 166
          }
        ],
      }
    },
    methods: {
      testClick (value, index) {
        console.log('点击操作~~', value, index)
      },
      changeData () {
        this.originData[0].name = '数据变更'
        console.log(this.originData)
      }
    }
  }

</script>

如下图:

链式组件 - 纵向

需要指定需要指定direction为vertical

Props

styleConfig

Events

Slots

yarn 和npm使用

//npm
npm i v-svg-chain
//yarn
yarn add v-svg-chain

import Vue from 'vue'
import vSvgChain from 'v-svg-chain'

Vue.use(vSvgChain)