ECharts嵌套(有向)图

Question

在考虑工作流的可视化表达式时，有向图可能是最先想到的解决方案之一。

我的应用程序已经利用了ECharts，所以我也想使用它为我的工作流程生成一个图形。

以下是嵌套定向工作流的基本示例：

​

ECharts中是否有可用作容器的组件？并链接到/从(类似于上面图像中的red“容器”)？

更新：制造了一个问题 on ECharts Github以帮助推动这一进程。两个ECharts系列之间的链接对于这个用例也是有用的。

Answer 1

出于某种原因，在我看来，你选择了一个错误的工具来完成你的任务。尽管有丰富的可能性，但电子海图的设计目的是可视化数据，而不是使用它们。当然，您可以编写任何业务逻辑，它将工作，但您将花费太多的时间。据我所知，您希望在流程图和BPMN之间找到一些东西。我建议您看看西格马、胞核或更多，如果您什么也不选择，那么请按照下面的步骤操作。

为了制作类似容器的东西，我将尝试配置三个grids，这似乎是在画布上定位图形的最简单方法：

1. 制作这三个网格，并将它们均匀地分布在水平上。

grid: [
  { id: 'g01', show: false, x:  '0%', y: 0, width: '33%', height: '100%' },
  { id: 'g02', show: false, x: '33%', y: 0, width: '33%', height: '100%' },
  { id: 'g03', show: false, x: '66%', y: 0, width: '33%', height: '100%' },
],

1. 现在，您需要每个网格的坐标系统来帮助您计算点位置，而不是从零开始，而是更好地为每个区段设置零。

yAxis: [
  { gridIndex: 0, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
  { gridIndex: 1, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
  { gridIndex: 2, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
],
xAxis: [
  { gridIndex: 0, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
  { gridIndex: 1, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
  { gridIndex: 2, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
],

1. 好的，你几乎有一个棋盘分成几个部分(组件)。让我们添加数据来可视化我们的工作。这里我只给出了部分数据，其余的见下面的例子。

{
  xAxisIndex: 0,
  yAxisIndex: 0,
  type: 'graph',
  layout: 'none',
  coordinateSystem: 'cartesian2d',
  edgeSymbol: ['circle', 'arrow'],
  edgeSymbolSize: [5, 10],
  symbol: 'none',
  data: [[1,6], [3,6], [5,6], [7,6], [9,6]],
  links: [
    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 2, target: 3 },
    { source: 3, target: 4 },
    { source: 4, target: 5 }
  ]
}

1. ОК。我们有三个有自己的坐标系的组件，我们可以用简单的坐标x，y绘制10x10区域内的图形，还有什么要做的呢？如图所示，绘制组件。出于这些目的，电子海图使用组件图形，我们可以尝试在中间绘制一个小组件。

graphic: [{
  type: 'group',
  left: '33%',
  top: 'bottom',
  children: [{
    type: 'rect',
    z: 0,
    bounding: 'raw',
    shape: { width: 1024 / 100 * 33, height: document.querySelector('#main').clientHeight - (document.querySelector('#main').clientHeight / 6), r:5 },
      style: {
        fill: '#fff',
        stroke: '#555',
        lineWidth: 1,
      }
    },{ ... }
  ]

你会得到这样的东西：

​

​

资料来源：

​

var xAxisData = ['Cat01', 'Cat02', 'Cat03', 'Cat04', 'Cat05'];
var seriesData = [6, 6, 6, 6, 6];
var myChart = echarts.init(document.getElementById('main'));

var option = {
  grid: [{
      id: 'g01',
      show: false,
      x: '0%',
      y: 0,
      width: '33%',
      height: '100%'
    },
    {
      id: 'g02',
      show: false,
      x: '33%',
      y: 0,
      width: '33%',
      height: '100%'
    },
    {
      id: 'g03',
      show: false,
      x: '66%',
      y: 0,
      width: '33%',
      height: '100%'
    },
  ],
  yAxis: [{
      gridIndex: 0,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
    {
      gridIndex: 1,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
    {
      gridIndex: 2,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
  ],
  xAxis: [{
      gridIndex: 0,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
    {
      gridIndex: 1,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
    {
      gridIndex: 2,
      type: 'value',
      min: 0,
      max: 10,
      show: false,
      splitNumber: 10
    },
  ],
  series: [{
    xAxisIndex: 0,
    yAxisIndex: 0,
    type: 'graph',
    layout: 'none',
    coordinateSystem: 'cartesian2d',
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [5, 10],
    symbol: 'none',
    data: [
      [1, 6],
      [3, 6],
      [5, 6],
      [7, 6],
      [9, 6]
    ],
    links: [{
        source: 0,
        target: 1
      },
      {
        source: 1,
        target: 2
      },
      {
        source: 2,
        target: 3
      },
      {
        source: 3,
        target: 4
      },
      {
        source: 4,
        target: 5
      }
    ]
  }, {
    xAxisIndex: 1,
    yAxisIndex: 1,
    type: 'graph',
    layout: 'none',
    coordinateSystem: 'cartesian2d',
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [10, 10],
    symbol: 'none',
    data: [
      [1, 6],
      [4, 6],
      [6, 6],
      [1, 3],
      [6, 3]
    ],
    links: [{
        source: 0,
        target: 1,
        lineStyle: {
          color: 'black'
        }
      },
      {
        source: 1,
        target: 2,
        lineStyle: {
          color: 'black'
        }
      },
      {
        source: 2,
        target: 3,
        lineStyle: {
          color: 'black'
        }
      },
      {
        source: 3,
        target: 4,
        lineStyle: {
          color: 'black'
        }
      },
      {
        source: 4,
        target: 5,
        lineStyle: {
          color: 'black'
        }
      },
    ],
  }],
  graphic: [{
    type: 'group',
    left: '33%',
    top: 'bottom',
    children: [{
        type: 'rect',
        z: 0,
        bounding: 'raw',
        shape: {
          width: 1024 / 100 * 33,
          height: document.querySelector('#main').clientHeight - (document.querySelector('#main').clientHeight / 6),
          r: 5
        },
        style: {
          fill: '#fff',
          stroke: '#555',
          lineWidth: 1,
        }
      },
      {
        type: 'line',
        z: 2,
        shape: {
          x1: 0,
          y1: 338 / 7,
          x2: 338,
          y2: 338 / 7,
        },
        style: {
          stroke: '#555',
          lineWidth: 1,
        }
      },
      {
        type: 'text',
        z: 3,
        position: [10, 15],
        style: {
          text: ['WalkSign'],
          font: '18px Verdana'
        }
      }
    ]
  }]
};

myChart.setOption(option);
console.log((1024 / 100 * 33))

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 1024px;height:400px;"></div>

​