Vue + gojs 绘制鱼骨图

效果图:

 

引入gojs

npm install gojs --save

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

git地址 开源不易 多多支持icon-default.png?t=M85Bhttps://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
};

即可

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Vue.js是一个基于JavaScript的开源框架,用于构建用户界面。而D3.js是一个用于在网页上创建可交互数据可视化的JavaScript库。结合Vue.js和D3.js可以很方便地绘制流程图。 首先,我们需要在Vue.js项目中安装D3.js,可以通过npm安装。在终端中运行以下命令: npm install d3 安装完成后,在Vue.js组件中引入D3.js库: import * as d3 from 'd3'; 接下来,我们可以在Vue.js组件的生命周期函数中创建一个D3.js绘制流程图的函数。比如,在mounted钩子函数中: mounted() { this.drawFlowChart(); } 然后,在drawFlowChart函数中,我们可以使用D3.js提供的方法和API来绘制流程图。这个过程可以分为以下几步: 1. 创建svg元素,用于承载流程图的绘制: const svg = d3.select('body') .append('svg') .attr('width', '100%') .attr('height', '100%'); 2. 定义绘制流程图所需的数据,比如节点和连接线的位置和样式信息: const nodes = [ { id: 1, name: 'Node 1' }, { id: 2, name: 'Node 2' }, { id: 3, name: 'Node 3' }, // ... ]; const links = [ { source: 1, target: 2 }, { source: 2, target: 3 }, // ... ]; 3. 创建节点和连接线的元素,并设置其位置和样式: const node = svg.selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x}, ${d.y})`); node.append('rect') .attr('width', 100) .attr('height', 50); const link = svg.selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); 4. 可以根据需要添加交互功能,比如节点的点击事件、鼠标悬停效果等等。 至此,我们使用Vue.js和D3.js成功绘制了一个流程图。通过Vue.js的数据绑定和D3.js的数据驱动视图的特性,可以很方便地更新流程图的数据和样式,实现交互和动态效果。同时,D3.js也提供了丰富的API可以用于进行复杂的数据可视化操作,比如节点之间的动画过渡效果、缩放和拖拽等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值