jtopo

效果如下图所示： 一、文件目录结构： 二、绘制png的鱼头、鱼尾图片 fish_head.png： fish_tail.png： 三、下载js文件 jquery、jtopo请到官网下载。 四、编写鱼骨图核心文件：MakFishBone.js let MakFishBone = (function (window) { let MakFishBone = function (canvas, options) { return new MakFishBone.fn.init(canvas, options) } MakFishBone.fn = MakFishBone.prototype = { constructor: MakFishBone, init: function (canvas, options) { this.canvas = canvas let dpr = window.devicePixelRatio || 1 canvas.width = parseInt(canvas.style.width) * dpr canvas.height = parseInt(canvas.style.height) * dpr this.ctx = canvas.getContext('2d') let defaultConfig = { /*json数据*/ data:

jTopo（Javascript Topology library) 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小，性能优异，由一群开发爱好者来维护。唯一感觉不足的是它是一个纯 js 库，没有像使用 ES6 语法，不能像模块化开发那样使用 import 导入， 由于博主的项目是使用vue-cli搭建的模块化开发项目，想要使用第三方库最好的方式是通过 npm install xxx 安装，然后在项目里 import xxx 来使用。但是在 JTopo 官网上并没有发现有该库的 npm 包，在 www.npmjs.com 上搜索 JTopo ，虽然找到了该库的 npm 包，但是这些包都是由一些个人开发者通过修改源码上传的，并且年限过久，博主担心直接使用的话可能会有一些诡异的 bug ，所以博主研究了一下，如何在 vue-cli 项目中直接导入第三方 js 库，幸运的是，很快就找到了办法，并且很容易哈，现将方法记录下来，并提供demo，供大家参考。 我们知道，无论是什么项目，最终通过打包后跑在浏览器上的肯定是一个 html 文件，在 Vue 中就是根目录下的 index.html ,在该文件中会将 webpack 打包后的 build.js 文件通过 <script> 标签方式引入，既然如此，我们可以大胆想象一下，我们可以认为 jtopo.js 就是