le5le-topology智能绘图引擎——学习笔记（一）

1、topology简介

最近公司需要用到这个开源的库，之前没学习过，这几天就来学习一下顺便做一下笔记

Le5le-topology 是一个可视化在线绘图工具，使用 Canvas + Typescript。支持 topology, UML、微服务架构、动态流量、SCADA 场景等。
是一个集动态交互、丰富展示、数据管理等一体的全功能可视化引擎，为物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等智能可视化场景而生。
简单来说就是把物联网设备上返回的数据渲染在可视化的面板上，然后进行对应的操作。

技术栈：

js ts vue react

github地址链接

文档演示地址

快速上手文档

2、Le5le-topology—有什么用

打开他的可视化操作文档时候是这样的：

类似于思维导图，关系图，但是可以做一些数据和事件的改动

通过拖拽组件就能直接实现对应的关系图
那么问题来了，为什么不用普通的XMind思维导图之类的呢
我的想法是

优点一：样式丰富，覆盖多种行业

这个框架可以用于在物联网的各种显示屏上，组件多元素化，下面展示一下：

大概就这些，所以说组件还是比较丰富的，使用在物联网上还是比较方便

优点二：提供事件，外观，动画，数据和结构等。

除了常规的组件之外，还提供了事件，外观 动画，数据和结构等




好了介绍完上面的的内容大概也了解了这个库是干什么用的了

3、Le5le-topology入门

安装步骤：
1.先安装好vue脚手架；
2、安装

$ npm install topology-vue
# OR
$ yarn add topology-vue

3、导入组件
有ts和js两种方式导入，这里我使用的是js导入：

4、加载字体图标：

5、 加载相关js文件

把node_module中topology-vue的view文件夹放到vue项目的public文件夹下面（导出html使用）

6、安装鼠标文件
把npm包中的旋转鼠标文件rotate.cur部署到 [域名]/assets/img/rotate.cur下。旋转鼠标是自定义的文件

到这一步基本上已经安装完成了