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

<template>
  <v-svg-chain style="height: 600px;" :data="originData" :style="{ backgroundColor: 'black' }" direction="vertical"></v-svg-chain>
</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
          }
        ]
      }
    }
  }

</script>

如下图:

Props

|参数|说明|类型|可选值|默认值| |----|---|---|-----|-----| | data| 攻击链数据 | Array | 必选 | --- | | direction | 攻击链方向 | String | horizontal/vertical | horizontal | | styleConfig | 样式配置项,注意: 外部传入值会与默认值进行merge操作 | Object | --- | 具体配置见下方styleConfig |

styleConfig

|参数|说明|类型|可选值|默认值| |----|---|---|-----|-----| | mediumLine| 中线样式 | Object | --- | { stroke: '#46A0D4',strokeWidth: 1 } | | nodeStartCircle | 节点起始端圆环样式 (中线上圆环) | Object | --- | { fill: '#72C4EF' } | | nodeLine | 节点分支线样式 | Object | --- | { stroke: '#46A0D4' } | | nodeEndCircle| 节点末端圆环样式 | Object | --- | { fill: '#72C4EF' } | | textContainer | 文本矩形矩形容器样式 | Object | --- | { width: '100', height: '30', fill: '#46A0D4', stroke: '#46A0D4',fillOpacity: 0.4, rx: 2 } | | text | 文本样式 | Object | --- | { fontSize: '18px', fontFamily: 'PingFangSC-Regular, PingFang SC', fontWeight: 'bold', fill: '#C9F6FF', textAnchor: 'middle', dominantBaseline: 'middle'} |

Events

| 事件名称 | 说明 | 回调参数 | | -------- | ---- | -------- | | clickItem | 点击攻击链具体节点触发 | value, index |

Slots

| name | 说明 | | ---- | ---- | | default | 节点起始端内容插槽, 当前默认为圆。 注意：该组件为svg书写, slot内容仅支持svg标签元素, 其他标签不会生效！|

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)