1.下载js

jtopo 更新下载

(不知道为什么网站被封禁了……在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js)

链接：https://pan.baidu.com/s/18V1HKwAuxzWM19RD4axGOg 
提取码：0304

2.引用

        文件放在public/js文件夹下，在index.hml内引用。

<script src="./js/jtopo-1.4.4_trial-esm-min.js"></script>

3.初测试使用

<template><div style="width:100%;height:100%;overflow: hidden;" id="topo_content"><div id="divId" style="height:109%;width:100%;"></div></div>
</template>
<script>
//获取标题高度
export default {name: 'index',components:{},data () {return {stage: null,layer:null,nodes:[]}},mounted(){this.init();},methods:{init(){this.stage = new jtopo.Stage('divId');this.layer = new jtopo.Layer('default');this.stage.addChild(this.layer);var nodeImg = require('../../../assets/img/map/nodeB.png')var sectorImg = require('../../../assets/img/map/sector.jpg')var cellImg = require('../../../assets/img/map/cell.png')// 创建节点,线条var nodeB = this.createNode("基站", "0,0,0", [], 40, 40,nodeImg);var sector01 = this.createNode("扇区01", "0,0,0", [], 40, 40,sectorImg);var link = this.createFoldLink(nodeB, sector01, "", true, "horizontal",'0,0,0');var sector02 = this.createNode("扇区02", "0,0,0", [], 40, 40,sectorImg);var link2 = this.createFoldLink(nodeB, sector02, "", true, "horizontal",'0,0,0');var sector03 = this.createNode("扇区03", "0,0,0", [], 40, 40,sectorImg);var link3 = this.createFoldLink(nodeB, sector03, "", true, "horizontal",'0,0,0');var cell01 = this.createNode("小区01", "0,0,0", [], 40, 40,cellImg);var link4 = this.createFoldLink(sector01, cell01, "", true, "horizontal",'0,0,0');var cell02 = this.createNode("小区02", "0,0,0", [], 40, 40,cellImg);var link5 = this.createFoldLink(sector02, cell02, "", true, "horizontal",'0,0,0');var cell03 = this.createNode("小区03", "0,0,0", [], 40, 40,cellImg);var link6 = this.createFoldLink(sector03, cell03, "", true, "horizontal",'0,0,0');//树形布局var treeLayout = new jtopo.TreeLayout('down', 200, 180);treeLayout.doLayout(this.nodes);// 按画布居中this.stage.translateToCenter();this.stage.show();},//创建节点// textValue 节点文本内容// fontColor 字体颜色// nodePosition 节点坐标位置 [x,y] 树形布局下坐标位置无用// width 节点宽度// height 节点高度// imageSrc 设置的图片路径createNode(textValue, fontColor, nodePos, width, height, imageSrc) {var newNode = new jtopo.Node(textValue,nodePos[0], nodePos[1],width, height);newNode.fontColor = fontColor;if (imageSrc != null || imageSrc != undefined) {newNode.setImage(imageSrc);} else {newNode.fillColor = "0,0,0";}newNode.textOffsetY = 3;//文本向下偏移些newNode.draggable = false;//是否支持拖拽newNode.showSelected = false;//节点点击是否显示选中状态this.layer.addChild(newNode);this.nodes.push(newNode)return newNode;},// 创建折线// nodeStart nodeEnd 节点// textValue 折线上文本// isArrow 是否有箭头// direction 方向，有垂直、水平两种 取值为：'horizontal' 或者 'vertical' ，默认为 'horizontal'// strokeColor 线条颜色// dashedPattern 虚线 不传代表实线, 传数字-越大虚线间隔越大createFoldLink(nodeStart, nodeEnd, textValue, isArrow, direction,strokeColor,dashedPattern) {var link = new jtopo.FoldLink(textValue,nodeStart, nodeEnd);link.direction = direction || "horizontal";link.fontColor = "0,0,0";link.lineWidth = 2; // 线宽link.textOffsetY = 23; // 文本偏移量（向下23个像素）link.strokeColor = strokeColor;link.dashedPattern = dashedPattern; // 虚线this.layer.addChild(link);this.nodes.push(link)return link;},}
}
</script>