ECharts 嵌套（有向）图

Question

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

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

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

ECharts中有没有可以作为容器使用的组件？并链接 to/from（类似于上图中的 red“容器”？

更新：created an issue 在 ECharts Github 仓库上帮助推动这一进程。两个 ECharts Series 之间的链接也应该对这个用例有用。

Answer 1

出于某种原因，在我看来您为任务选择了错误的工具。尽管 Echarts 具有丰富的可能性，但它旨在可视化数据，而不是使用它们。当然，你可以编写任何业务逻辑，它会起作用，但你会花费太多时间。据我了解，您想要介于 flowchart and BPMN. I recommend taking a look at sigmajs, cytoscapejs or many more 之间的内容，如果您什么都不选择，请尝试执行后续步骤。

为了制作容器之类的东西，我会尝试配置三个 grids，这似乎是在 canvas:

上定位图形的最简单方法

制作三个格子，水平均匀分布。

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 },
],

好的，你几乎已经把棋盘分成了几个部分（组件）。让我们添加数据以可视化我们的工作。这里我只给出了部分数据，其余的见下例。

{
  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 }
  ]
}

ОК。我们有三个具有自己坐标系的组件，我们可以通过简单的坐标 [x,y] 在 10x10 区域内绘制图形之类的东西。还有什么可做的？如图所示绘制组件。为此，Echarts 使用组件graphic，我们可以尝试在中心绘制一个小组件。

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>

ECharts 嵌套（有向）图

ECharts Nested (directed) Graph

echarts

xstate