如何在le5le-topology中封装第三方图形库，如echarts、highcharts等，而不是重复造轮子。可参考源码中：libs/topology-chart-diagram

1. 加载图形库 js，并注册自定义节点

  1. import { registerNode } from 'topology-core/middles';
  2. import { loadJS } from 'topology-core/utils';
  3. import {
  4.   echarts
  5. } from './echarts';
  7. export function register() {
  8.   // 如果不存在echarts，则先下载
  9.   // 否则使用用户已经加载的echarts
  10.   if (!(window as any).echarts) {
  11.     loadJS('https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js', null, true);
  12.   }
  14.   // echarts封装图标库函数已经写好的前提下，直接调用registerNode注册函数注册好，使用更简单。
  15.   // 参数1 - 定义图形库组件名为： 'echarts'
  16.   // 参数2 - 绘画函数为echarts
  17.   // 参数3，4，5 - 锚点和文字等计算采用默认计算函数
  18.   registerNode('echarts', echarts, null, null, null);
  19. }

2. 实现绘图函数

  1. // 创建一个原生div，用于第三方图形库的装载容器
  2. import { createDiv } from 'topology-core/utils';
  4. // 存放echarts原生dom节点
  5. const echartsData: any = {};
  7. export function echarts(ctx: CanvasRenderingContext2D, node: Node) {
  8.   // 绘制一个底图，类似于占位符。
  9.   rectangle(ctx, node);
  11.   // 如果未加载图形库，直接返回
  12.   const echarts = (window as any).echarts;
  13.   if (!node.data || !echarts) {
  14.     return;
  15.   }
  17.   // 这里，我们把echarts需要的json数据放在node.data.echarts下面
  18.   // 如果node.data为字符串，就序列号为json对象
  19.   if (typeof node.data === 'string') {
  20.     node.data = JSON.parse(node.data);
  21.   }
  23.   // 没有echarts数据，直接返回
  24.   if (!node.data.echarts) {
  25.     return;
  26.   }
  28.   // echarts第三方图形库是元素dom元素，需要设置一个唯一的id，方便绘画引擎识别
  29.   if (!node.elementId) {
  30.     node.elementId = s8();
  31.   }
  33.   // 节点的elementLoaded用于判断第三方图形库是否第一次加载，是否需要初始化
  34.   // 这是一个辅助变量，用户自己赋值使用或不用
  35.   if (!node.elementLoaded) {
  36.     // 创建一个div容器
  37.     echartsData[node.id] = {
  38.       div: createDiv(node)
  39.     };
  40.     node.elementLoaded = true;
  41.     document.body.appendChild(echartsData[node.id].div);
  43.     // 添加当前节点到div层，否则无法显示
  44.     node.addToDiv();
  45.     // 初始化echarts图形组件
  46.     echartsData[node.id].chart = echarts.init(echartsData[node.id].div, node.data.echarts.theme);
  47.     node.elementRendered = false;
  49.     // 等待父div先渲染完成，然后resize为父容器大小，避免初始图表控件太大
  50.     setTimeout(() => {
  51.       echartsData[node.id].chart.resize();
  52.     });
  53.   }
  55.   // 节点的elementRendered用于判断第三方图形库是否需要重绘
  56.   // 绘画引擎需要重绘节点时，会把此属性设置为false
  57.   if (!node.elementRendered) {
  58.     // 初始化时，等待父div先渲染完成，避免初始图表控件太大。
  59.     setTimeout(() => {
  60.       echartsData[node.id].chart.setOption(node.data.echarts.option);
  61.       echartsData[node.id].chart.resize();
  62.       // 重绘完成，避免不必要的重复重绘
  63.       node.elementRendered = true;
  64.     });
  65.   }
  66. }