笔者为le5le-2D可视化的初学者，开发环境为vue2，目前使用了两种方式引入topology，但是对于echarts图形的渲染仍有疑惑，现把所学记录下来，方便大家互相学习交流

首先介绍le5le-2D可视化的背景，官网如下：https://2ds.le5le.com/
简单来说就是方便快捷的可视化编辑工具，可以绘制原理图，流程图，拓扑图等等，还可以进行数据绑定，以驱动图形变化，笔者使用的两种引入方式分别为下载@topology依赖和下载topology-vue依赖，下面对这两种引入方式分别进行介绍。

一、使用@topology

首先：

npm install @topology

然后在vue页面中引入

// 先导入库
import { Topology, Options, registerNode } from '@topology/core';
import { register as registerFlow } from '@topology/flow-diagram';
import { register as registerActivity } from '@topology/activity-diagram';
import { register as registerClass } from '@topology/class-diagram';
import { register as registerSequence } from '@topology/sequence-diagram';
import { register as registerChart } from '@topology/chart-diagram';// json对象形式的数据，可以先在官网绘制，下载Json文件即可获得
import {Data} from '@/assets/js/diagram/le5le.js';

<div class="canvas" id="topo-canvas"></div>

// 注册图形库
canvasRegister() {registerFlow();registerActivity();registerClass();registerSequence();registerChart();// ...
}
Init() {var options = {background:'rgb(21,28,42)'}var canvas = new Topology("topo-canvas", options);canvasRegister();// 将pen加到画布中，并渲染出来canvas.open(Data);// 显示鹰眼地图canvas.showMap();// 输出画布中的数据console.log(canvas.data());setTimeout(() => {canvas.setValue({id:'761fc569',image:"static/image/红灯.PNG"})canvas.render();}, 3000);// 1.怎样向画布中加入画笔（图形，线）// 定义一个pen，矩形const pen = {name: 'rectangle',text: '矩形',x: 100,y: 100,width: 100,height: 100,};// 方式一：open加载，将清除之前数据// canvas.open({ pens: [pen] });// 方式二：添加到画布，并选中，会触发生命周期函数beforeAddPen// canvas.addPen(pen);// 2、查找// 查找方式一：id查找，返回的是数组// const pens1 = topology.find(pen.id);// 查找方式二：tag查找，返回的是数组// const pens2 = topology.find('aaa');// 查找id = pen.id的画笔，// canvas.setValue({//   id: pen.id,//   text: "le5le",// });// 3、修改// 查找id = pen.id的画笔，修改id为111// canvas.setValue({//   id: pen.id,//   newId: "111",// });// 4、删除// canvas.delete(topology.find(pen.id));// 5、重绘显示// canvas.render();
},

按照上述的操作，即可创建简单的可绘制图形，但是笔者并未将echarts图形渲染出来。
注：应该是@topology的版本问题，原本使用的版本为1.0.1，改为使用0.2.24版本之后可以渲染echarts图形，但是还未能将数据实时刷新，注意不同版本对应的json对象的写法也是不同的。
例如：1.0.1版本的json对象写法

Data = {x: 0,y: 0,scale: 1,pens: [{width: 300,height: 300,disableAnchor: true,externElement: true,name: "echarts",form: [{key: "dataY",name: "数据",type: "text",readonly: true,placeholder: "仅绑定变量",multiple: true,dataIds: [{ dataId: "d-2-a-001", name: "温度" }],},{key: "echarts",name: "echarts",type: "code",language: "json",isNotString: true,},{key: "echarts",key2: "max",type: "number",name: "最大数量",placeholder: "x",},],echarts: {option: {tooltip: { formatter: "{a} <br/>{b} : {c}%" },series: [{name: "业务指标",type: "gauge",detail: { formatter: "{value}%" },data: [{ name: "温度", value: 48 }],},],legend: {},},replaceMode: 1,color: "#FFD666FF",background: "#69C0FFFF",textColor: "#000000FF",},id: "2f4b2635",children: [],x: 871.5,y: 522,lineWidth: 1,fontSize: 12,lineHeight: 1.5,anchors: [{ id: "0", penId: "2f4b2635", x: 0.5, y: 0 },{ id: "1", penId: "2f4b2635", x: 1, y: 0.5 },{ id: "2", penId: "2f4b2635", x: 0.5, y: 1 },{ id: "3", penId: "2f4b2635", x: 0, y: 0.5 },],rotate: 0,color: "#FFD666FF",background: "#69C0FFFF",textColor: "#000000FF",},]}

0.2.24版本的json对象写做：

Data = {x: 0,y: 0,scale: 1,pens: [{imageRatio: true,points: [],manualAnchors: [],animateDuration: 0,animateFrames: [],animateFrame: 0,name: "echarts",tags: [],visible: true,rect: {x: 797.0000000000006,y: 267.9999999999996,width: 651.9999999999994,height: 434.0000000000004,center: { x: 1123.0000000000002, y: 484.9999999999998 },ex: 1449,ey: 702,},fontStyle: "normal",fontWeight: "normal",textBackground: "",textDecoration: "",textDecorationDash: 0,textDecorationColor: "",events: [],dash: 0,lineDashOffset: 0,lineWidth: 1,strokeStyle: "#BD1D1DFF",fillStyle: "",globalAlpha: 1,rotate: 0,offsetRotate: 0,textMaxLine: 0,textOffsetX: 0,textOffsetY: 0,animatePos: 0,id: "363c18c1",zRotate: 0,borderRadius: 0,imageAlign: "center",gradientAngle: 0,gradientRadius: 0.01,paddingTop: 0,paddingBottom: 0,paddingLeft: 0,paddingRight: 0,children: [],text: "仪表盘",data: {echarts: {option: {tooltip: { formatter: "{a} <br/>{b} : {c}%" },toolbox: { feature: { restore: {}, saveAsImage: {} } },series: [{name: "业务指标",type: "gauge",detail: { formatter: "{value}%" },data: [{ value: 50, name: "完成率" }],},],},},},type: 0,animateType: "",paddingLeftNum: 0,paddingRightNum: 0,paddingTopNum: 0,paddingBottomNum: 0,textRect: {x: 797.0000000000006,y: 593.4999999999999,width: 651.9999999999994,height: 108.5000000000001,center: { x: 1123.0000000000002, y: 647.7499999999999 },ex: 1449,ey: 702,},fullTextRect: {x: 797.0000000000006,y: 267.9999999999996,width: 651.9999999999994,height: 434.0000000000004,center: { x: 1123.0000000000002, y: 484.9999999999998 },ex: 1449,ey: 702,},iconRect: {x: 797.0000000000006,y: 267.9999999999996,width: 651.9999999999994,height: 434.0000000000004,center: { x: 1123.0000000000002, y: 484.9999999999998 },ex: 1449,ey: 702,},fullIconRect: {x: 797.0000000000006,y: 267.9999999999996,width: 651.9999999999994,height: 434.0000000000004,center: { x: 1123.0000000000002, y: 484.9999999999998 },ex: 1449,ey: 702,},fontColor: "#222222",fontFamily:'"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',fontSize: 12,lineHeight: 1.5,textAlign: "center",textBaseline: "middle",elementId: "f972d80",whiteSpace: "",evs: { x: 1638, y: 695 },oldRect: {x: 607.0000000000006,y: 108.99999999999966,width: 643.9999999999994,height: 431.00000000000034,center: { x: 929.0000000000002, y: 324.49999999999983 },ex: 1251,ey: 540,},},]}

注：后改为使用1.1.0版本的@topology，echarts可以成功渲染了！

<template><div id="app"><div id="topology"></div></div>
</template><script>
import { Topology } from "@topology/core";
import { flowPens } from "@topology/flow-diagram";
import { activityDiagram } from "@topology/activity-diagram";
import { classPens } from "@topology/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@topology/sequence-diagram";
import { register as registerChart } from "@topology/chart-diagram";
import { formPens } from "@topology/form-diagram";import { Data } from "./le5le-echarts.js";export default {name: "App",mounted() {var topologyOptions = {};var topology = new Topology("topology", topologyOptions);topology.register(flowPens());topology.register(activityDiagram());topology.register(classPens());topology.register(sequencePens());topology.registerCanvasDraw(sequencePensbyCtx());topology.registerCanvasDraw(formPens());topology.registerCanvasDraw(registerChart());topology.open(Data);topology.showMap();// 此处可以用setValue的方法改变echarts的值，也可以使用http请求，从后端接收值，具体的写法已经在上述1.0.1版本的json对象中写明，需要注意的是form对象中的dataIds要指明需要接收的dataId是多少setInterval(() => {var value = Math.random() * 100;value = value.toFixed(0)topology.setValue({id:'2f4b2635',echarts: {option: {tooltip: { formatter: "{a} <br/>{b} : {c}%" },series: [{name: "业务指标",type: "gauge",detail: { formatter: "{value}%" },data: [{ name: "温度", value: value }],},],legend: {},},replaceMode: 1,color: "#FFD666FF",background: "#69C0FFFF",textColor: "#000000FF",},})// topology.render();}, 2000);},
};
</script>

但是还有一些小bug，比如echarts图表渲染不稳定，待解决后再更新。

二、使用topology-vue

这种方式会直接将编辑框等一起渲染出来，但是对于画笔的修改操作等，笔者还未弄清楚，echarts虽然能够渲染，但是并未绑定数据驱动，具体方式如下：点我跳转

后续有进展会持续更新，欢迎大家学习交流~

le5le-2D可视化的学习相关推荐

web组态学习——Le5le Topogy可视化绘图工具使用（一）
1.Le5le Topogy可视化绘图工具网址:http://topology.le5le.com/workspace?id=5d4d725a6025d7704b113240 2.点击"查看 ...
乐吾乐2D可视化绘图引擎
前言: 经常关注科技发展的小伙伴都知道,这几年随着物联网.云计算.大数据.人工智能等新一代信息技术领域增速发展,数字化浪潮席卷全球各行各业.疫情初期我们整个人类迎接了前所未有的挑战,在安全与生产关系密 ...
乐吾乐2D可视化智慧光伏能源赋能方案
目录前言: 关键词: 一.光伏能源: 二.乐吾乐2D可视化光伏应用案例: 三.总结与畅想: 前言: 2019年,我国的新能源占国家总能源结构的比例仅仅为10%-20%.十四五规划中明确了大力发展绿色 ...
3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程从安装到最终图像的一切都将从头开始教授,不需要任何经验大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
SYNCHRO 4D可视化调度学习教程 SYNCHRO 4D: Visual Scheduling
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 技能水平:初级|流派:电子学习|语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:3h 14m |大小 ...
可视化深度学习模型的训练误差和验证误差
可视化深度学习模型的训练误差和验证误差 #导入基础包和库 # Load libraries import numpy as np from keras.datasets import imdb fro ...
数据可视化组队学习：《Task02 - 艺术画笔见乾坤》笔记
文章目录前言 1 概述 1.1 matplotlib的使用逻辑 1.2 matplotlib的三层api 1.3 Artist类的结构 1.4 matplotlib标准用法 2 自定义你的Artis ...
基于SSM的概念可视化程序设计学习系统毕业设计-附源码021009
SSM概念可视化程序设计学习系统摘要随着计算机技术的发展,特别是计算机网络技术与数据库技术的发展,使用人们的生活与工作方式发生了很大的改观.网络技术的应用使得计算机之间通信.在线学习成为可能,而 ...
石油储运生产 2D 可视化，组态应用赋能工业智慧发展
当前,国际油价低位徘徊导致各国石油化工行业投资大幅缩减,石油化工建设行业竞争环境日趋严峻,施工企业的利润空间也被不断压缩.内外交困的环境下,促使企业采取更有效的管理手段来提高效率和降低成本.石油工业大 ...
斯坦福大学数据可视化课程学习笔记：第一节可视化的发展与目标
<斯坦福大学数据可视化课程学习笔记>课程资源来自于斯坦福大学数据可视化课程,是我所在团队实习生提升计划的一部分.本系列是 "秉姝" 同学在学习过程中记录和整理的学习笔记 ...

le5le-2D可视化的学习

一、使用@topology

二、使用topology-vue

le5le-2D可视化的学习相关推荐

最新文章

热门文章