鱼骨图

npm install cky-fish-bone

main.js 引入

import fishBone from 'cky-fish-bone'

Vue.use(fishBone)

使用

 <cky-fish-bone
     :data="fishData"
     :start-title="'开始'"
 >
 </cky-fish-bone>

1.data传入数据

fishData: [
    {
        top: {
            label: '2020-05-30',
            children: [
                 {
                      label: '哈哈',
                      children: [
                           {
                                 label: '子集1',
                                 data: '14'
                           },
                           {
                                  label: '子集2'
                           },
                           {
                                  label: '子集3'
                           },
                           {
                                 label: '子集4'
                           },
                           {
                                  label: '子集5'
                           }
                      ]
                 },
                 {
                      label: '第二'
                 },
            ]
        },
        bottom: {
            label: "2020-06-05",
            children: [
                  {
                       label: '第2'
                  },
                  {
                       label: '5445'
                  }
            ]
        }
    
    },
]

2.start-title 开始按钮的名称

3.height 设置鱼骨图容易高度

4.prop 配置指定data指定key

分别可配置

{
     top: 'top',
     bottom: 'bottom',
     children: 'children',
     label: 'label'
}

示列(这里会覆盖所有节点的对应键名)

<cky-fish-bone
    :data="fishData"
    :start-title="'开始'"
    :prop="{top: 't',bottom: 'b'}"
>
</cky-fish-bone>

fishData: [
    {
         top: {
               label: '2020-05-30',
               children: [
                   {
                       label: '哈哈',
                       children: [
                           {
                                label: '子集1',
                                data: '14'
                           },
                           {
                                 label: '子集2'
                           },
                           {
                                 label: '子集3'
                           },
                           {
                                 label: '子集4'
                           },
                           {
                                 label: '子集5'
                           }
                       ]
               ]
         },
   
    }
]

5.theme 设置颜色主题

<cky-fish-bone
    :data="fishData"
    :start-title="'开始'"
    theme="#ffff"
>
</cky-fish-bone>

7.单击每项目获取详情数据 @handClick

<cky-fish-bone
    :data="fishData"
    :start-title="'开始'"
    icon="false
    @handClick="child"
>
<template v-slot:content="scope">
    <p style="width: 400px">{{scope}}</p>
 </template>
</cky-fish-bone>