笔者为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虽然能够渲染，但是并未绑定数据驱动，具体方式如下：点我跳转
后续有进展会持续更新，欢迎大家学习交流~
7239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
