乐吾乐

默认图形库

topology 所有图形库都是动态扩展的，为了使用方便，引擎直接内置了一些基础图形库，提供了流程图相关的扩展库，按需导入使用即可。

基础图形

直接使用

name描述
rectangle矩形
circle圆
triangle三角形
diamond菱形
pentagon五边形
pentagram五角星
hexagon六边形
leftArrow左箭头
rightArrow右箭头
twowayArrow双向箭头
message消息框
cloud云
file文件
cube立方体
people人
line线
iframe网页
video音视频
gifgif 动画
svgPathsvg path
const pen = {
  name: "rectangle", // name 为上面表格中name
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
};
topology.addPen(pen);
topology.inactive();

约定图形

约定如此，并非强制要求。

name描述
text纯文本
image纯图片，纯 icon

图片层级

@topology/core 1.1.0 版本后，为了提升性能，额外创建了两个 canvas 用来绘制图片，一个在原画布的底下，一个在原画布的上面。
带图片的画笔的图片默认是在上层的 canvas 的，它会遮住所有的非图片画笔，并且使用置顶，置底是没有作用的，新增了一个 isBottom 的属性，将该画笔移动到下层的 canvas ，从而实现非图片画笔遮住该图片。

topology.setValue({ id: "le5le", isBottom: true });

官网设置 将图片置到文字的底下

流程图 

import { flowPens } from "@topology/flow-diagram";

topology.register(flowPens());
name描述
flowData数据
flowSubprocess子流程
flowDb数据库
flowDocument文档
flowInternalStorage内部存储
flowQueue队列
flowManually手动输入
flowDisplay展示
flowParallel并行模式
flowComment注释

活动图 

import {
  activityDiagram,
  activityDiagramByCtx,
} from "@topology/activity-diagram";

topology.register(activityDiagram());
// 原生canvas绘画的图库，支持逻辑复杂的需求
topology.registerCanvasDraw(activityDiagramByCtx());
name描述
activityFinal结束
swimlaneV垂直泳道
swimlaneH水平泳道
forkV垂直分岔/汇合
forkH水平分岔/汇合

时序图 

import { sequencePens, sequencePensbyCtx } from "@topology/sequence-diagram";

topology.register(sequencePens());
topology.registerCanvasDraw(sequencePensbyCtx());
name描述
lifeline生命线
sequenceFocus激活

类图 

import { classPens } from "@topology/class-diagram";

topology.register(classPens());
name描述
simpleClass简单类图
interfaceClass普通类图

Echarts 图表

  • 引入

在 html 中引入 echarts

<script src="/echarts.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> -->
  • 注册
import { register as registerEcharts } from "@topology/chart-diagram";

registerEcharts();
  • 使用
const pen = {
  name: "echarts",
  x: 100,
  y: 100,
  width: 400,
  height: 300,
  externElement: true,
  disableAnchor: true,
  echarts: {
    option: {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
        },
      ],
    },
  },
};
topology.addPen(pen);
topology.inactive();
  • 数据更新 通常来讲，echarts 拖拽到画布后，只关注它的数据变化，即 x 轴的变化，单条线（或多条线）值的变化。
    而 setValue 处理起来，每次都需要更改 echarts.options 下的全部值，对于用户来说，过于复杂，于是提供了一种固定的规则处理。
    mqtt 与 ws 的默认处理也是通过 setValue 的，满足下面条件，可只关注数据的变化。
/**
 * 图表追加或替换数据，只关注数据
 */
export interface ChartData {
  dataX: any | any[]; // x 轴数据变化
  dataY: any | any[]; // y 轴数据变化
  /**
   * @deprecated 在 1.1.14 版本后移除
   * */
  overwrite?: boolean; // 追加 or 替换 ， false 追加
}

// id: 'le5le' x 轴追加 两个值， y 轴追加两个值
topology.setValue({
  id: "le5le",
  dataX: ["eight", "nine"],
  dataY: [500, 600],
  // overwrite: true   // 若需要覆盖，使用 true
});

// 多条线的场景使用，顺序与 option.series 相同
topology.setValue({
  id: "le5le",
  dataX: ["eight", "nine"],
  dataY: [
    [500, 300],
    [700, 400],
    [300, 1200],
    [600, 1200],
    [400, 50],
  ],//五组数据
});

  • 1.1.14 版本后

    仍基于之前的数据更新，只是追加，替换，覆盖不再由参数决定了，取决于当前 echarts 画笔的属性 echarts.replaceMode 来决定，即一个 echarts 画笔设置好以后，数据更新的替换模式是不再改变的。
    根据原来的追加以及覆盖，新增了一种部分替换 Replace ，常用于饼图数据的变化。

// 上文中的 overwrite 不再可以决定追加或覆盖，需要提前为 echarts 画笔配置 echarts.replaceMode 属性
export enum ReplaceMode {
  Add,
  Replace,
  ReplaceAll,
}

export interface ChartPen extends Pen {
  echarts: {
    option: any; // echarts 参数
    max: number; // 最大数据量
    replaceMode: ReplaceMode; // 替换模式
  };
}

// 1. 饼图示例
const pen = {
  name: "echarts",
  x: 100,
  y: 100,
  width: 400,
  height: 300,
  externElement: true,
  disableAnchor: true,
  echarts: {
    option: {
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 20, name: "户数" },
            { value: 40, name: "电压" },
            { value: 60, name: "电流" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    },
    max: 5000,
    replaceMode: 1, // 部分替换
  },
};
topology.addPen(pen);
topology.setValue({
  id: pen.id,
  // 饼图，dataY 中的 name 决定替换饼图中的哪一部分
  dataY: [{ value: 88, name: "户数" }],
});

// 2. 折线图示例
const pen = {
  name: "echarts",
  x: 100,
  y: 100,
  width: 400,
  height: 300,
  externElement: true,
  disableAnchor: true,
  echarts: {
    option: {
      xAxis: {
        type: "category",
        data: ["电流", "户数", "电压"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901],
          type: "line",
        },
      ],
    },
    max: 5000,
    replaceMode: 1,
  },
};

topology.addPen(pen);
topology.setValue({
  id: pen.id,
  // 折线图 dataX 标识替换哪个 category 所对应的 值
  dataX: ['电压', '电流'],
  dataY: [50, 90],
});

highcharts 图表

  • 引入

在 html 中引入 highcharts , cdn 若挂了，下载到本地

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
  • 注册
import { registerHighcharts } from "@topology/chart-diagram";

registerHighcharts();
  • 使用
const pen = {
  name: "highcharts",
  x: 100,
  y: 100,
  width: 400,
  height: 200,
  disableAnchor: true,
  externElement: true,
  highcharts: {
    option: {
      chart: {
        backgroundColor: "#ffffff00",
      },
      credits: {
        enabled: false,
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
        },
      ],
    },
  },
};
topology.addPen(pen);
topology.inactive();
  • 数据更新

同 echarts 数据更新

LightningChart 图表

参考 echarts 的配置格式，在 lightningCharts 库的基础上进行封装，目前支持的属性配置（lightningCharts.option）如下：

名称类型描述
typestring图表类型。可选'line'|'bar'|'pie'|'gauge'
themestring主题。参考 默认库颜色主题
dataany数据
titlestring图表标题
groupsstring[]'bar'类型分组
categoriesstring[]'bar'类型分类
yTitlestring'bar'类型 y 轴标题
innerRadiusnumber'pie'类型内圆占比
startAnglestring'gauge'类型起始角度，默认 225
endAnglestring'gauge'类型结束角度，默认-45
minnumber'gauge'类型最小值，默认 0
maxnumber'gauge'类型最大值，默认 100
backgroundstring'gauge'类型填充颜色
  • 注册
import { registerLightningChart } from "@topology/chart-diagram";

registerLightningChart();
  • 使用
//折线图
const line = {
  name: "lightningCharts",
  x: 100,
  y: 100,
  width: 400,
  height: 200,
  disableAnchor: true,
  externElement: true,
  lightningCharts: {
    option: {
      type: "line",
      theme: "darkGreen",
      data: [
        {
          name: "Sports Car",
          data: [
            { x: 0, y: 0 },
            { x: 50, y: 10 },
            { x: 80, y: 20 },
            { x: 100, y: 30 },
            { x: 150, y: 40 },
            { x: 180, y: 50 },
            { x: 230, y: 60 },
            { x: 290, y: 70 },
          ],
        },
        {
          name: "Family Car",
          data: [
            { x: 0, y: 0 },
            { x: 100, y: 10 },
            { x: 230, y: 20 },
            { x: 390, y: 30 },
            { x: 470, y: 40 },
            { x: 540, y: 50 },
            { x: 600, y: 60 },
            { x: 800, y: 70 },
          ],
        },
        {
          name: "Pick-up Car",
          data: [
            { x: 0, y: 0 },
            { x: 80, y: 10 },
            { x: 100, y: 20 },
            { x: 150, y: 30 },
            { x: 230, y: 40 },
            { x: 380, y: 50 },
            { x: 450, y: 60 },
            { x: 580, y: 70 },
          ],
        },
      ],
      title: "title",
    },
  },
};
topology.addPen(line);
topology.inactive();

//柱状图
const bar = {
  name: "lightningCharts",
  x: 100,
  y: 100,
  width: 400,
  height: 200,
  disableAnchor: true,
  externElement: true,
  lightningCharts: {
    option: {
      type: "bar",
      theme: "darkGreen",
      groups: ["Finland", "Germany", "UK"],
      categories: ["Engineers", "Sales", "Marketing"],
      data: [
        [48, 27, 24],
        [19, 40, 14],
        [33, 33, 62],
      ],
      title: "My first chart",
      yTitle: "纵坐标",
    },
  },
};
topology.addPen(bar);
topology.inactive();

//饼图
const pie = {
  name: "lightningCharts",
  x: 100,
  y: 100,
  width: 600,
  height: 300,
  disableAnchor: true,
  externElement: true,
  lightningCharts: {
    option: {
      type: "pie",
      innerRadius: 50,
      data: [
        {
          name: "Planning",
          value: 40,
        },
        {
          name: "Development",
          value: 120,
        },
        {
          name: "Testing",
          value: 60,
        },
        {
          name: "Review",
          value: 24,
        },
        {
          name: "Bug Fixing",
          value: 90,
        },
      ],
    },
  },
};
topology.addPen(pie);
topology.inactive();

//进度条
const gauge = {
  name: "lightningCharts",
  x: 100,
  y: 100,
  width: 300,
  height: 300,
  disableAnchor: true,
  externElement: true,
  lightningCharts: {
    option: {
      type: "gauge",
      data: 80,
      // title: '进度条',
      // startAngle: 90,
      // endAngle: -270,
      background: "#0000ff",
    },
  },
};
topology.addPen(gauge);
topology.inactive();