1. 安装

  1. yarn add @topology/chart-diagram
  2. 或
  3. npm install --save @topology/chart-diagram

2. 注册echarts类型节点

  1. import { register as registerChart } from '@topology/chart-diagram';
  3. registerChart([可选参数]_echarts);
  5. // 说明:
  6. // 方式一：如果需要使用指定版本echarts，提前用scripts加载即可。
  7. // 参考：html中加载 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  8. // 否则，注册服务未发现echart，将下载：
  9. // https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js
  10. // registerChart();
  12. // 方式二：
  13. // import { register as registerChart } from '@topology/chart-diagram';
  14. // import { _echarts} from 'xxxxx'
  15. // registerChart(_echarts);

3. 使用echarts节点

注册echarts服务后，画布可以使用一个name为echarts的节点，表示echarts的图形库。我们把echarts的有关数据，写在node.data.echarts下即可。

  1. canvas.addNode({
  2.   text: '折线图',
  3.   rect: {
  4.     width: 300,
  5.     height: 200
  6.   },
  7.   name: 'echarts',
  8.   data: {
  9.     echarts: {
  10.       option: {
  11.         xAxis: {
  12.           type: 'category',
  13.           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  14.         },
  15.         yAxis: {
  16.           type: 'value'
  17.         },
  18.         series: [{
  19.           data: [820, 932, 901, 934, 1290, 1330, 1320],
  20.           type: 'line'
  21.         }]
  22.       }
  23.     }
  24.   }
  25. });

4. 更新重绘数据

方法一： 设置node属性：elementRendered = false
elementRendered 告诉node，挂载的第三方dom是否正确渲染，如果否，则调用第三方dom重绘函数。

方法二： 通过echart对象重绘 （@topology/chart-diagram >= 0.2.25）
import { echartsObjs } from ‘@topology/chart-diagram’;
其中 echartsObjs 中的echartsObjs[node.id].chart 指原生echarts对象，可以直接被使用。

5. 置底

把echarts放到正常的图层中，将会失去动态鼠标交互效果。方法如下：

方法1：drag对象中设置elementId=’’
方法2：调用node方法，node.removeFromDiv()；