200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Vue + gojs 绘制鱼骨图

Vue + gojs 绘制鱼骨图

时间:2021-08-13 23:23:47

相关推荐

Vue + gojs 绘制鱼骨图

效果图:

引入gojs

npm install gojs --save

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

git地址 开源不易 多多支持/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- Northwoods Software')>-1|| f.indexOf('Not for distribution or production use')>-1|| f.indexOf('')>-1){undefinedreturn '';}else{undefinedreturn f};

即可

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。