Vue + gojs 绘制鱼骨图

效果图：

 

引入gojs

npm install gojs --save

在git地址拉下代码 ，地图组件地址是 src\components\fishboneDiagram

git地址 开源不易 多多支持https://gitee.com/yongchaolu/echarts-map

组件可以直接在项目中使用

Class 设置鱼骨图大小  组件默认为100%
 

传参json为Object格式

json: {
        'text': 'Incorrect Deliveries', 'size': 18, 'weight': 'Bold', 'causes': [
          {
            'text': 'Skills', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'knowledge', 'weight': 'Bold', 'causes': [
                  {
                    'text': 'procedures', 'causes': [
                      { 'text': 'documentation' }
                    ]
                  },
                  { 'text': 'products' }
                ]
              },
              { 'text': 'literacy', 'weight': 'Bold' }
            ]
          },
          {
            'text': 'Procedures', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'manual', 'weight': 'Bold', 'causes': [
                  { 'text': 'consistency' }
                ]
              },
              {
                'text': 'automated', 'weight': 'Bold', 'causes': [
                  { 'text': 'correctness' },
                  { 'text': 'reliability' }
                ]
              }
            ]
          },
          {
            'text': 'Communication', 'size': 14, 'weight': 'Bold', 'causes': [
              { 'text': 'ambiguity', 'weight': 'Bold' },
              {
                'text': 'sales staff', 'weight': 'Bold', 'causes': [
                  {
                    'text': 'order details', 'causes': [
                      { 'text': 'lack of knowledge' }
                    ]
                  }
                ]
              },
              {
                'text': 'telephone orders', 'weight': 'Bold', 'causes': [
                  { 'text': 'lack of information' }
                ]
              },
              {
                'text': 'picking slips', 'weight': 'Bold', 'causes': [
                  { 'text': 'details' },
                  { 'text': 'legibility' }
                ]
              }
            ]
          },
          {
            'text': 'Transport', 'size': 14, 'weight': 'Bold', 'causes': [
              {
                'text': 'information', 'weight': 'Bold', 'causes': [
                  { 'text': 'incorrect person' },
                  {
                    'text': 'incorrect addresses', 'causes': [
                      {
                        'text': 'customer data base', 'causes': [
                          { 'text': 'not up-to-date' },
                          { 'text': 'incorrect program' }
                        ]
                      }
                    ]
                  },
                  { 'text': 'incorrect dept' }
                ]
              },
              {
                'text': 'carriers', 'weight': 'Bold', 'causes': [
                  { 'text': 'efficiency' },
                  { 'text': 'methods' }
                ]
              }
            ]
          }
        ]
      }

引入成功后 左上角若有gojs水印

去除水印方法：

     前往 node_modules/gojs/release/go-module.js 文件

     搜索 a.charCodeAt(g)^b[(b[c]+b[d])%256]

  并且在 return f 前面加上

if(f.indexOf('GoJS 2.1 evaluation')>-1  
|| f.indexOf('(c) 1998-2021 Northwoods Software')>-1
|| f.indexOf('Not for distribution or production use')>-1
|| f.indexOf('gojs.net')>-1
){undefined
    return '';
}else{undefined
     return f
};

即可